vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

#课程目标

了解 vue 框架的特点
掌握创建 vue 实例
掌握 data 用法及特点
掌握 vue 基本指令的用法
掌握 methods 用法

#知识点

直接用 <script> 引入，Vue 会被注册为一个全局变量。

创建vue实例，并将实例挂载到window上。

<body>

    <div id='app'>

        <h1>{{msg}}</h1>

    </div>

    <script>

        // console.log(Vue)

        window.vm=new Vue({

            el:'#app',

            data:{

                msg:'hello world!'

            }

        })

    </script>

</body>

运行结果如下：

data对象中定义的属性是‘响应式’的，属性值发生改变页面也会改变，演示效果1
指令：（1）双大括号{{}},插值语法。可以写js表达式和三目运算

（2）v-text\v-html

（2）条件渲染 v-show,根据表达式之真假值，切换元素的 display CSS 属性。

（4）绑定动态属性 v-bind，简写：

（6）在表单控件或者组件上创建双向绑定 v-model

（7）绑定事件监听器 v-on，简写@

methods 定义方法

<body>

    <div id='app'>

        <h1>{{msg}}</h1>

        <button @click='changeMsg'>改变</button>

    </div>

    <script>

        // console.log(Vue)

        window.vm=new Vue({

            el:'#app',

            data:{

                msg:'hello world!'

            },

            methods: {

                changeMsg(){

                this.msg='八维'

                }

            },

        })

    </script>

</body>

效果展示

思考：vue操作数据与传统的操作dom的区别

#授课思路

#案例和作业

用 vue 面向数据的编程思想实现下图，并且实现tab切换。
v-model 练习

巴特西

vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

#课程目标

#知识点

#授课思路

#案例和作业

最新文章

热门文章