Vue快速入门笔记一

1.什么是Vue

       Vue是一套用于快捷开发前端应用的框架技术,它的特点用于构建用户界面得前端渐进式框架,采用自底向上的逐层应用,只关注视图层,技术简单易于上手.想让Vue工作,就必须创建一个Vue实例(const vm = new Vue({})),且要传入一个配置对象.

2.Vue的基础语法

(1).插值表达式

       插值表达式:Vue中的一种固定语法:{{ 变量 }},用于渲染输出变量的数据

<h1>{{ name }}</h1>
<script>
 const vm = new Vue({
    el:'xxx',
    data:{
       name:"hiphop先生"
    }
 })
</script>

(2).指令:v-text/v-html

       v-text:将数据渲染到指定的标签中进行文本显示

       v-html:将数据渲染到指定的标签中进行解释展示

    <div id="app">
        <p v-text="sex"></p>
        <p v-html="sex"></p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: "hiphop先生",
                sex: "<h1>男性</h1>"
            }
        })
    </script>

(3).v-once

       使用情况:一般和插值表达式或者数据渲染指令结合使用,用于一次性渲染数据,用在页面中有一些数据加载渲染后不再发生变化,可以结合v-once指令进行操作

(4).v-show,v-if

       v-show:根据判断条件是否为true,设置包含内容的显示/隐藏

       v-if:根据判断条件是否为true,设置包含内容的加载渲染/不加载渲染

总结:

      相同点:v-show和v-if在页面上都能达到相同的效果,可以通过条件变量判断是否显示某些内容.

      不同点:v-show:通过display:none样式控制显示和隐藏,v-show只是把dom元素隐藏了,页面中存在,切换频繁时使用,并且后期需要操作该dom元素时,可以获取dom元素

       v-if:通过DOM操作加载/不加载控制显示/隐藏,v-if彻底把dom元素删除掉了,页面中不存在,所以切换频率较低时使用,并且如果后期需要操作该dom元素,无法获取到

(5).v-bind

       v-bind:动态操作标签属性的指令,让标签属性可以接受变量数据

       简写形式:v-bind:attr="value" => :attr="value"

(6).v-on

       v-on:用于给标签添加事件处理的指令

       简写形式:v-on:click="fn"' => @click="fn"

(7).v-for

       v-for:列表渲染指令,循环遍历集合数据,比如数组中的多项数据,还可以遍历对象,字符串(用得少),次数(用得少).

       注意事项:循环遍历数据时,用户的操作有可能会影响数据顺序的改变,为了保持数据的状态需要添加key属性绑定数据状态.

       v-for中key的原理:如果key使用index,在后期处理时,如果扰乱了DOM的顺序结构,页面结构就有可能出现问题,如果不写key,Vue会默认把index作为key值,key是虚拟dom对象的标识,当状态中的数据发生变化时,Vue就会根据新的数据生成新的虚拟DOM,然后新的虚拟dom和旧的虚拟dom进行对比,新虚拟dom根据key来查找旧虚拟dom中的数据,如果文本数据不一致,就会采用新的数据转为真实dom,如果旧虚拟dom中没有对应的key值,新虚拟dom直接生成真实dom.

在开发中如何选择key值:

       (1),最好使用每条数据的唯一标识作为key,比如手机号,学号,id等等

       (2),如果不存在对数据的逆序添加,逆序删除等破坏排序的操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

(8).v-model

       v-model:主要用于表单元素,进行数据的双向绑定