Vue开发基础（一）

Vue实例

创建Vue实例

基本Vue实例配置选项

创建Vue实例基础代码:

<script>
    var vm = new Vue ({
        //选项
    })
</script>

1. el唯一根标签

   创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm的el绑定

   	<div id="app">
           <!-- 使用插值表达式{{}}把data数据渲染到页面 -->
           {{msg}} 
       </div>
       <script>
           var vm = new Vue({
               el: '#app', //通过el与div元素绑定
               data:{
                   msg:'我是一个Vue实例'
               }
           })
       </script>
   </body>
   </html>
   

   ---

   浏览器打开，运行如图所示：

   

2. data初始数据

   Vue实例的数据对象为data，会将data的属性转换为getter、setter，从而让data的属性能够响应数据的变化

   <div id="app">
       <p>{{}}</p>
   </div>
   <script>
   	var vm = new Vue({
           el:'#app',
           data:{
   			name:'定义初始值'
           }
       })
   </script>
   

   ---

   

   特别注意：也可以通过vm.$data访问原始数据对象。

   Vue实例代理了data对象上的所有属性，访问vm.name相当于访问vm.$data.name

   <div id="app">
   	vm.$data.name
   </div>
   <script>
   	var vm = new Vue({
           el:'#app',
           data:{
   			name:'定义初始值'
           }
       })
       console.log(vm.$data.name)
       console.log(vm.name)
   </script>
   

   ---

   

3. method定义方法

   method用来定义方法，定义在method属性中的方法可以作为页面的事件处理方法使用，当事件触发后，执行相应的事件处理方法

   <div id="app">
           <div>{{name}}</div>
           <!-- 给按钮绑定一个点击事件 -->
           <button @click="showmsg">点击我</button>
       </div>
       <script>
           var vm = new Vue({
               el: '#app',
               data:{
                   name:'张三'
               },
               // method方法
               methods:{
                   showmsg(){
                       this.name = '张三没了'      //运行原理：没有点击按钮的时候data数据为空，当点击之后给data的name赋值
                   }
               }
           })
   
       </script>
   

   ---

   单击前

   

   单击后的效果

   

4. computed

   compute计算属性作用与一些数据需要随着其他数据变动而变动的情景

   在事件处理方法中，this指向的Vue实例的计算属性结果会被缓存起来，只有依赖响应式属性变化时，才会重新计算

   <div id="app">
       <p>总价格：{{totalPrice}}</p>
       <p>单价：{{price}}</p>
       <p>数量：{{num}}</p>
       <div>
         <button @click="num == 0 ? 0 : num--">减少数量</button>
         <button @click="num++">增加数量</button>
       </div>
     </div>
     <script>
       var vm = new Vue({
         el: '#app',
         data: {
           price: 20,
           num: 0
         },
         computed: {   //点击一次数据变动一次，computed就会接受一次数据
           // 总价格totalPrice
           totalPrice () {
             return this.price * this.num
           }
         }
       })
     </script>
   

   ---

   

5. watch状态监听

   Vue中的事件处理方法可以通过单击事件、键盘事件等触发事件来触发，但不能自动监听当前的Vue实例中的数据变化

   使用computed方法可以实现对当前实例数据的实时变化

    <div id="app">
           <input type="text" v-model="englishname">
       </div>
       <script>
           var vm =new Vue({
               el:'#app',
               data:{
                   englishname:'joker'
               },
               watch:{
                   englishname(newname,oldname){   //newname为修改后显示的数据，oldname为修改之前的数据
                       console.log(newname,oldname)
                   }
               }
           })
       </script>
   

   ---

   

6. filters过滤器

   数据的变化除了在Vue逻辑层进行操作外，还可以通过filters过滤器来实现。有两种实现方法。

   • 在插值表达式中使用过滤器

     在插值表达式中还可以使用过滤器来对数据进行处理，语法为{{data | filter}}

     eg.将数据中的字母进行大小写转换

     <div id="app">   
         	<!-- "|"叫做管道符，管道符之前代码执行的结果会传到后面作为参数进行处理 -->
             {{message | toUpcase}}
         </div>
         <script>
             var vm = new Vue({
                 el:'#app',
                 data:{
                     message:'you are my son'
                 },
                 filters:{
                     //大小写转换
                     toUpcase(value){
                         return value ? value.toUpperCase() : ''
                     }
                 }
             })
         </script>
     

     ---

     

   • 在V-bind属性绑定中使用过滤器

     v-bind用于属性绑定，如"v-bind:id=data"，表示绑定id属性，值为data。具体语法为data后面可以写成”data | filter“

      <div id="app">
             <div v-bind:id="dataId | formatId">helloworld</div>
         </div>
         <script>
             var vm = new Vue({
                 el:'#app',
                 data:{
                     dataId:'dff1'
                 },
                 filters:{
                     formatId(value){
                         return value ? value.charAt(1) + value.indexOf('d') : ''	//charAt()意思为获取索引为1的字符，indexOf()为获取字符所在的索引
                     }
                 }
             })
         </script>
     

     ---

Vue数据绑定

Vue中数绑定功能极大地提高了开发效率，如：通过V-for内置指令绑定数组实现列表结构等。

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方法来实现。

绑定样式

1. 绑定内联样式

   Vue实例中定义地初始数据data，可以通过v-bind将样式数据绑定给DOM元素

   <div id="app">
           <div id="app">
               <!-- 绑定样式属性值 -->
               <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
                 <!-- 绑定样式对象 -->
                 <div v-bind:style="myDiv"></div>
               </div>
             </div>
             <script>
               var vm = new Vue({
                 el: '#app',
                 data: {
                   myDiv: {backgroundColor: 'red', width: '100px', height: '100px'},
                   pink: 'pink',
                   width: '100%',
                   height: '200px'
                 }
               })
             </script>
   

   ---

   

   使用v-bind绑定样式时，Vue做了专门地增强，表达式结果地类型除了时字符串之外，还可以时对象或数据

2. 绑定样式类

   样式类即以类名(class)定义元素的样式

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <!-- 自己的vue.js的文件路径-->
       <script src="../node_modules/vue/dist/vue.js"></script> 
       <style>
           .box{
               background-color: pink;
               width: 100%;
               height: 200px;
           }
           .inner{
               background-color: red;
               width: 100px;
               height: 50px;
               border: 2px solid white;
           }
       </style>
   </head>
   <body>
       <div id="app">
           <!-- 绑定了两个class分别为box和inner的类名属性 -->
           <div v-bind:class="box">我嫩叠</div>
           <div v-bind:class="inner">我嫩叠</div>
           <div v-bind:class="inner">我嫩叠</div>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   // 用于在data数定义中定义类名box和inner
                   box:'box',
                   inner:'inner'
               }
           })
       </script>
   </body>
   </html>
   

   ---

   

内置指令

Vue开发者提供了内置指令，通过内置指令就可以用简洁的代码实现复杂的功能，这里有一些常用的内置指令

Vue的内置指令书写规则以v开头，后缀用来区分指令的功能，且通过短横线连接。指令必须写在DOM元素上。另外，内置指令还可以使用简写的方式，例如：v-on:click简写为*@click**，v-bind:class简写为 :click*

1. v-model/v-bind

   v-model:

   主要实现数据双向绑定，通常用在表单元素，如input、textarea、select等

   <div id="app">
           <input type="text" v-model='msg'>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'憨憨'
               }
           })
       </script>
   

   

   

   通过图2可以发现当我们再一次改变文本框中的内容时vm.msg所显示的内容也会改变，这就是双向绑定

   ---

   v-bind:

   实现数据的单项绑定，绑定时需要在v-bind后面添加value来实现属性绑定，代码为v-bind:value=""

   <div id="app">
           <input type="text" v-bind:value='msg'>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'憨憨'
               }
           })
       </script>
   

   

   

   对比与v-model我们在一次改变v-bind绑定的属性文本框中改变内容发现vm.msg中的值还是原来的内容，这就是单项绑定

2. v-if/v-show

   v-if用来控制元素显示或隐藏，属性为布尔值。v-show可以实现与v-if同样效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创建，所以v-if在性能上不如v-show。

   <div id="app">
           <input type="button" @click="wantshow=!wantshow" value="显示/隐藏">
       	<!-- 或者v-show="wantshow"，更推荐使用v-show -->
           <div v-show="wantshow" style="background-color: blanchedalmond;">我嫩叠</div>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   wantshow:true
               }
           })
       </script>
   

   

3. v-text

   在DOM元素内部插入本文内容，用于将数据填充到标签中，作用和插值表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将html标签一并输出 ）

   <div id="app">
           <p v-text="msg"></p>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'你好！'
               }
           })
       </script>
   

   

4. v-html

   在DOM元素内部插入HTML标签内容

   如果我们展示的数据包含元素标签或者样式就需要使用v-html

   <div id="app">
           <!-- 区分插值表达式，v-text，v-html不同 -->
           <p>{{msg}}</p>
           <p v-text="msg"></p>
           <p v-html="msg"></p>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'<h2>我是vue</h2>'
               }
           })
       </script>
   

   如上代码中data的数据msg包含了二级标签 ---->msg，然后在与v-text以及{{}}显示比较不同，从图中我们可以发现v-html可以将二级标签渲染出来而v-text与{{}}只能将它们识别成字符串进行输出

   

5. v-on

   事件监听指令，直接与事件类型配合使用

   通常使用的指令v-on:click可以缩写为@click

   <div id="app">
           <p>{{msg}}</p>
           <input type="button" value="点击" v-on:click="showline">
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'点击查看详情'
               },
               methods:{
                   showline(){
                       this.msg = '啥也没有'
                   }
               }
           })
       </script>
   

   

6. v-for

   实现页面列表渲染，常用来循环数组

   <div id="app">
           <div v-for="(itme,key) in list" data-id="key">
               <div>
                   索引：{{key}}
                   元素内容：{{itme}}
               </div>
           </div>
       </div>
       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   list:[1,2,3,4,5,6,7,8,9]
               }
           })
       </script>
   

   

学生列表案例

创建一个学生统计表

<div id="app">
    <button @click="add">添加学生</button>
    <button @click="del">删除学生</button>
    <table border="1" width="50%" style="border-collapse: collapse">
      <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr align="center" v-for="item in students">
        <td>{{item.grade}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        students: []
      },
      methods: {
        // 添加学生信息
        add () {
          var student = {grade: '1', name: '张三', gender: '男', age: 25}
          this.students.push(student)
        },
        // 删除学生信息
        del () {
          this.students.pop()
        }
      }
    })
  </script>