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

课程目标

1、了解vue框架的特点
2、掌握创建vue实例
3、掌握data 用法及特点
4、掌握vue基本指令的用法
5、掌握methods用法

知识点

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

2、创建vue实例，并将实例挂载到windows上

<body>
      <div id="app">
           <h1>{{msg}}</h1>
      </div>
      <script>
            window.vm=new Vue({
                 el:"#app",
                  data:{
                        msg:"hello world!"
                  }
            })
      </script>
</body>

运行结果如下：

3、data对象中定义的属性是'响应式'的，属性值发生改变页面也会改变
演示效果：

4、指令
（1）双大括号{{}}，插值语法，可以写js语法和三元运算符
（2）v-text/v-html
(3) 条件渲染v-show，根据表达式的真假值（true/false）,切换元素的display css属性
（4）绑定动态属性v-bind，可以简写为：
（5）在表单控件或者组件上创建双向数据绑定
（6）绑定时间的监听器v-on，可以简写为 @
5、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='hello world' } }, }) </script> </body>
效果展示：