Vue

Vue开发基础(一)

Santa
2021-10-16 / 0 评论 / 0 点赞 / 60 阅读 / 8,034 字
温馨提示:
本文最后更新于 2021-10-19,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Vue实例

创建Vue实例

基本Vue实例配置选项

选项说明
dataVue实例数据对象
method定义Vue实例的方法
components定义子组件
computed计算属性
filter过滤器
el唯一根标签
watch监听数据变化

创建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>
    

    浏览器打开,运行如图所示:

    vueel.png

  2. data初始数据

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

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

    Vuedata01.png

    特别注意:也可以通过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>
    

    Vuedata.png

  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>
    

    单击前

    vueMethod01.png

    单击后的效果

    vueMethod02.png

  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>
    

    vueComputed.gif

  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>
    

    vuewatch.gif

  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>
      

      vueFilter.png

    • 在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>
      

vueFilter02.png

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>
    

    VueBind.png

    使用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>
    

    vueBind2.png

内置指令

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

指令说明
v-bind单向数据绑定
v-on监听事件
v-model双向数绑定
v-text插入本文内容
v-html插入包括HTML的内容
v-for列表渲染
v-if条件渲染
v-show显示渲染

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>
    

    vmodel.gif

    vmodel2.png

    通过图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>
    

    vmodel.gif

    vbind.png

    对比与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>
    

    vshow.gif

  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>
    

    vtext.png

  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与{{}}只能将它们识别成字符串进行输出

    vhtml.png

  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>
    

    von.gif

  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>
    

    vfor.png

学生列表案例

创建一个学生统计表

<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>

zonghe1.gif

0

评论