Vue.js入门

Posted 2020-11-20 bluedr

 引入  //  实例的重要选项 el data methods watch created  //  

模板指令  //  前缀$  //  值中的JavaScript表达式

 

1. vue的引入：

• cdn：

  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

• js：

  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script type="text/javascript" src="js/vue.js"></script>
  
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script type="text/javascript" src="js/vue.min.js"></script>

 

2 . 实例的重要参数：

•  data：数据都放在data中，data中的数据会在html结构中对应的地方响应

  <p id="app1">绑定内容1：{{ message1 }}</p>
  
  var app1 = new Vue({
      el:"#app1",
      data:{
          message1:"内容1",
          message2:"内容2"
      }
  })

   

• methods：‘方法的意思‘，里面存放一些方法

  <p id="app1" @click="funGo">绑定内容1：{{ info }}</p>
  //点击执行方法funGo --> 打印"内容"
  
  var app1 = new Vue({
      el:"#app1",
      data:{
          info:"内容"
      }
      methods:{
          funGo:function(){
              console.log(this.message1);  //this指向Vue本身(也就是变量app1）
          }
      }
  })

   

• watch：监听数据，当数据发生变化时候，可以调用函数

  <p id="app1">绑定内容1：{{ info }}</p>
  
  var app1 = new Vue({
      el:"#app1",
      data:{
          info:"内容"
      },
      methods:{
          funGo:function(){
              this.info ++;
              console.log(this.info);  //this指向Vue本身(也就是变量app1）
          }
      },
      watch:{
          ‘info‘:function(val,oldVal){  //监听data中的数据info的变化，当info发生变化时打印val和oldVal
              console.log(val,oldVal);  //val-改变后的值；oldVal-改变之前的值
          }
      }
  })

   

3 . 模板指令：

• html和vue对象的粘合剂
• 小结：
  • new一个Vue对象的时候可以设置它的属性，其中最重要的包括el，data，methods，watch 其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法vue对象里的设置通过html指令进行关联响应
  • 重要指令：
    • v-text 渲染数据
    • v-if  控制显示     
    • v-on  绑定事件
    • v-for  循环渲染
• 数据渲染：v-text  v-html  {{ }}

  <p id="app1">绑定内容1：{{ message1 }}</p>
  
  <p v-text="info"></p>
  <p v-html="info"></p> //保留html结构

• 判断/控制模板显示与影藏：v-if  v-show

  区别：
  v-if直接不渲染
  v-show是渲染了以后通过display:none;来影藏
  <p id="app" v-if="isSeen">abc</p>
  //表达式isSeen的值为true时，p标签显示，isSeen为false时，p标签影藏
  var app = new Vue({
      el:"#app",
      data:{
          isSeen:false
      }
  })

•  渲染循环列表：v-for

  <ul id="app">
      <li v-for="item in items">
  　　     <!--item为items中的每一项-->
          <p v-text="item.label"></p>
      </li>
  </ul>
  
  var app = new Vue({
      el:"#app",
      data:{
          items:[
              {label:"apple"},
              {label:"banana"}
          ]
      }
  })
  ==>
  ·apple
  ·banana

•  事件绑定：v-on  缩写为@

  <button v-on:click="funGo">点击</button>  //点击时调用vue的方法中的funGo方法
  <button @click="funGo">点击</button> //简写形式
  
  var app1 = new Vue({
      el:"#app1",
      data:{
          info:"内容"
      },
      methods:{
          funGo:function(){
              this.info ++;
              console.log(this.info);  //this指向Vue本身(也就是变量app1）
          }
      },
      watch:{
          ‘info‘:function(val,oldVal){  //监听data中的数据info的变化，当info发生变化时打印val和oldVal
              console.log(val,oldVal);  //val-改变后的值；oldVal-改变之前的值
          }
      }
  })

• 属性事件绑定：v-bind   绑定标签中的 id , class , src 等等...   缩写为：

  <img v-bind:src="imgSrc">
  <img :src="imgSrc">
  
  //常用的class可以简写
  <div :class="{ red:isRed }"></div>
  <div :class="[classA,classB]"></div>
  <!--isB为true时classB存在，为false时不存在-->
  <div :class="[classA,{ classB:isB , classC:isC }]"></div>

•  单次循环插值：v-once

  <p v-once id="app1">这个内容将不会改变：{{ message }}</p>
  
  //渲染一次后不在绑定
  var app1 = new Vue({
      el:"#app1",
      data:{
          message:"内容"
      }
  })

•  原始html：v-html

  <p>内容：{{ rawHtml }}</p>
  <p>内容：<span v-html="rawHtml"></span></p>  //识别html标签
  ==>
  内容：<span style="color:red">hello</span>
  内容：hello

 

4 . 实例中的前缀 $

• $data  $el  $watch

  var data = { a: 1 }
  var vm = new Vue({
      el: "#app",
      data: data
  })
  
  //其中
  vm.$data === data //true
  vm.$el === document.getElementById("app");
  //$watch 是一个实例方法
  vm.$watch(‘a‘,function(newValue, oldValue){
      //这个回调将在 vm.a 改变后调用
  })

   

 5 . 值中的 JavaScript表达式

• code

  <p>{{ num + 1 }}</p>
  <p>{{ ok ? "yes" : "no" }}</p>
  <p>{{ message.split(‘‘).reverse().join(‘‘) }}</p>
  <p b-bind=" ‘item‘ + num "></p>
  //每个绑定只能包含单个表达式
  
  //以下例子不会生效
  {{ var a = 1 }}  //这是语句，不是表达式
  {{ if (ok) { return message} }}  //流控制语句也不会生效，请使用三元表达式

 

------- end -------