20201012王杉

学习内容:

  • 什么是Vue:

    1. Vue是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的JS框架
  • Vue的基本页面:

    <div id="app">
    <!-- 编写内容--!>
    </div>
    <script>
    var vm = new Vue({
    el:'#app',
    data:{
    msg:'hello Vue!'
    },
    methods: {
    alertMsg:function(){
    alert(this.name);
    }
    }
    });
    </script>
  • Vue语法:

    绑定语法:{{变量/js表达式}}

    1. Model语法:{{变量名}}

    2. 算数/比较/逻辑/三目运算:{{20+20/20>12/true&&false/a>b?a:b}}

    3. 方法调用:{{alertMsg()}}

      <script>
      var vm = new Vue({
      el:'#app',
      data:{
      msg:'hello Vue!'
      },
      methods: {
      alertMsg:function(){
      alert(this.name);
      }
      }
      });
      </script>
    4. 对象属性访问:{{obj.age}}

      <script>
      var vm = new Vue({
      el:'#app',
      data:{
      obj:{
      age:15
      }
      }
      });
      </script>
    5. 数组下标访问:{{arr[0]}}

      <script>
      var vm = new Vue({
      el:'#app',
      data:{
      arr:[1,2,3,4]
      }
      });
      </script>
    6. 字符串拼接:

      {{`模板字符串`}}
      <script>
      var vm = new Vue({
      el:'#app',
      data:{
      msg:'hello Vue!'
      }
      });
      </script>
    7. 创建对象:{{new Date().toLocaleString()}}有返回值就会返回,没有或者使用if和for就不行

      注意::不能使用{{}}动态绑定属性

  • 指令:

    1. v-bind:

      <style>
           .fontColor{
      color: red;
      }
      .backGround{
      background-color: #f0f;
      }
      </style>
      <div id="app">
      <!-- v-bind绑定class属性 -->
      <div v-bind:class="fontColor">{{new Date().toLocaleString()}}</div>
      <!-- v-bind动态绑定可变 -->
      <div v-bind:[attr]="backGround">{{new Date().toLocaleString()}}</div>
      </div>
      <script>
      var vm = new Vue({
      el:'#app',
      data:{
      fontColor:"fontColor",
      attr:"class",
      backGround:"backGround",
      }
      });
      </script>
    2. 控制元素的显示/隐藏

      ①v-show

      ②v-if v-else-if v-else

      <!-- v-show会判断是否显示 -->
           <h2 v-show="true">{{msg}}</h2>
      <!-- 原理和display:none一样 -->
      <!-- 两个选择二选一显示,v-if,v-else -->
      <h2 v-if="num==0">啊哈哈哈哈</h2>
      <h2 v-else-if="num>3" >啊哇哇哇哇</h2>
      <h2 v-else>啊嘿嘿黑嘿</h2>
      <!-- 不显示的原因是彻底删除了,v-if,v-else-if ,v-else必须是紧邻的兄弟不能有其它元素的间隔-->
    3. 反复生成多个相同结构的元素v-for:

      <!-- 反复生成多个相同结构的元素 v-for:会自动遍历数组/对象/字符串中的每一个元素,每遍历一个元素,就会自动创建 -->
           <table>
      <tr>
      <td>名字</td>
      <td>年龄</td>
      </tr>
      <tr v-for="(elem,i) of obj":key="i">
      <td>{{elem.name}}</td>
      <td>{{elem.age}}</td>
      </tr>
      </table>
      <!-- i:下标,:key是在内存中为每一个html元素副本添加一个唯一标识。如果每一个html元素副本都有唯一标识,则每一次修改数组元素的时候,
      v-for只需要找到那个受影响的那个html元素 效率高!!!!-->
      <!-- 注意:1.v-for一定一定要写在重复生成的元素上而不是父元素上,2.如果不关心下标,只关心元素,可以简写(不加i的值) -->
      <!-- <any v-for="elem of 数组/对象/字符串"> -->
      <!-- 3.of和in是可以互相替代的,用法完全一致,vue中v-for同一了js中for of和for in,既可以遍历索引数组,又可以遍历对象 -->
      <!-- 4.of会自动取出数组/集合中的每个元素的值和下标,保存到右边变量中,如果of后是数字,那么会从1开始迭代递增到目标数字 -->
    4. v-on:和v-bind:一样可以设置成普通绑定和动态绑定

      <!-- v-on -->
           <!-- 点击button按钮,显示:data中的对象数据 -->
      <button v-on:click="alertMsg">输出</button>

      注意:v-on: 可以缩写 @

    5. 组织默认行为和组织冒泡

      <div v-on:click='handle0'>
               <button v-on:click='handle3'>点击触发</button>
      <!-- 阻止冒泡 -->
      <button v-on:click.stop='handle3'>点击触发</button>
      </div>
      <!-- 阻止默认事件 (事件修饰符)没有顺序,可以多个修饰-->
      <a v-on:click.prevent.stop='handle3' href="http://www.baidu.com">百度</a>
      <script>
      var vm = new Vue({
      el:'#app',
      data:{
      msg:'hello Vue!'
      },
      methods:{
      handle0:function(){
      this.num++;
      },
      handle3:function($event){
      //原生js阻止冒泡
      // event.stopPropagation();
      //原生js阻止默认行动
      // event.preventDefault();
      }
      }
      });
      </script>
    6. v-html绑定html片段

      <!-- 存在安全问题 本站内部数据可用 第三方数据不可用 -->
           <div v-html='msg1'></div>
      
    7. v-cloak:防止用户短暂看到{{}}的语法

      <style>
           [v-cloak]{
      display: none;
      }
      </style>
      <!-- 插值表达式{{}} 会出现闪动使用v-cloak避免出现 -->
      <div v-cloak>{{msg}}</div>
    8. v-text:是{{}}的等效指令,只不过v-text是写在属性中的,而{{}}是写在内容中的

      <!-- 相比插值更方便 不会出现闪动 -->
           <div v-text='msg'></div>
      
    9. 保护{{}}中的内容不被编译

      v-pre:保护当前元素中的{{}}语法,不会被绑定渲染

      <!--显示原始信息 跳过编译 -->
           <div v-pre>{{msg}}</div>
      
    10. 唯一不变元素

      v-once:当前元素的{{}}语法对应的数据只能绑定一次,以后即使模型数据发生改变,也不会再改变了

      <!-- 响应式 -->
            <!-- <div>{{msg}}</div> 在console框中修改vm.msg值会发生改变-->
      <!-- 在console框中修改vm.info值不会发生改变 只编译一次后续没有响应式的能力
      如果使用的信息不需要修改 就使用v-once 可以提高性能 不需要被监听是否被修改 -->
      <!-- 原理:watch中,有一个队列,维护这每个数据变量和页面之间的对应关系。每次数据模型发生改变后,watch每次数据改变都会通知watchwatch会遍历受到该数据变量影响的元素,并逐个的修改他们。通过减少监视的元素个数,可以优化页面绑定的效率 -->
      <div v-once>{{info}}</div>

心得:

​ 今天学习了很多,不错。

标签

评论