Vue的入门

Vue的入门

Vue

引入Vue.js有两种方式

1. 直接引入链接

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   

2. 下载vue的源码：https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后在引入就行了

创建Vue实例

  <div id="app">{{msg}}</div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello Vue!",
            }
        });
    </script>

注意：{{}}学名叫语法糖，里面放入实例的属性就可以在浏览器页面进行渲染

Vue的表达式与插值

• 创建Vue实例后，可以在语法糖里写入表达式，同样也可以在浏览器进行渲染

   <div id="app">
          <p>{{msg}}</p>
          <p>{{num * 10}}</p>
          <p>{{bel ? "我是真的":"我是假的"}}</p>
          <!-- <p>{{var i = 1}}</p>添加变量是无效的 -->
      </div>
      <script>
          let vm = new Vue({
              el:"#app",
              data:{
                  msg:"hello world",
                  num:10,
                  bel:0
              }
          });
      </script>
  

Vue的计算属性：computed

我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护

这个时候就要使用计算属性，计算属性里面可以完成各种复杂的逻辑，包括运算，函数调用等等，只要最终返回一个结果就可以了。

 <div id="app">
        <p>{{msg}}</p>
        <p>{{reverseMsg}}</p>
        <p>{{add}}</p>
    </div>
    <script>
         let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world",
                num:10,
                bel:0
            },
            computed:{
                reverseMsg:function(){//这里的函数不支持es6的写法
                    return this.msg.split('').reverse().join('');
                },
                add:function(){
                    return this.num *1000 / 5 + 122
                }
            }
        });
    </script>

Vue的methods方法

  <div id="app">{{reverse()}}</div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world"
            },
            methods:{
                reverse:function(){
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    </script>

从以上计算机属性和methods两个来比较，表面上看没什么区别，可是他们有两个区别

1. 计算属性的调用是直接写方法名就行了，不需要加括号，而methods调用则必须要加括号
2. 执行机制的不同：computed里的方法在初始化执行过后，只要任何值有更新，那么所有在computed计算属性里和其相关的值都会更新。
   methods只有在调用的时候才会执行对应的方法，不会自动同步数据。

Vue的watch属性：侦听的作用，监听数据的变化

 <div id="app">
        <p>{{num}}</p>
        <p>{{msg}}</p>
        <p>{{name}}</p>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                num:100,
                msg:"hello world",
                name:"xumo"
            },
            watch:{
                //简单数据类型
                num(newValue,oldValue){ //获取新的值，然后在赋给num进行渲染
                    console.log("新值" + newValue +"旧值" + oldValue);
                },
                //复杂数据类型
                msg:function(newValue){//会根据msg的内容改变而改变
                    this.name = newValue;
                }
            }
        });
    </script>

注意：如果数据比较大，一般不建议使用watch，会影响性能