01.vue数据绑定

Vue特点

　　渐进式: 渐进, 可以理解成一步一步的. 在使用Vue的时候, 我们不需要把整个Vue框架的东西都用上, 可以一步一步的根据需要慢慢的替换之前的代码。

　　自底向上逐层应用: 由底层开始, 把基础的东西先写好, 逐层往上增加新的或者复杂的功能。

　　MVVM设计模式: Model(模型)-View(视图)-VM(视图模型), 这是一种基于前端开发的架构模式,其核心是

　　提供View和Model的双向数据绑定, 这里的Model状态能直接影响View而View的变化在某些情况下也能影响Model。

　　声明式渲染: Vue允许我们用简洁的语法将数据与DOM绑定在一起。

数据绑定

1. 值绑定
　　1.1 插值表达式
　　　　{{}}(mustache 大胡子语法)，{{}}里面是Vue的编译环境，里面可以填data里的变量，表达式，函数调用。

<div id="app">
   <p>{{message}}</p>
   <p>{{1<2?true:false}}</p>
   <p>{{sumFunc(1,2)}}</p>
</div>

　

let app = new Vue({
    //el字段，用来挂载dom元素，指定Vue实例的作用域
    el: '#app',
    //data字段，指定Vue实例的数据源
    data: {
        message: 'Hello Vue!',
        sumFunc(a, b) {
            return a + b;
        }
    }
});

　

　　1.2 v-text或者v-html指令
　　　　二者区别：
　　　　　　当数据里有html字符串时，v-html能直接解析，而v-text和{{}}会原样输出。
　　　　注意：vue指令中的""(双引号)里面也是Vue的编译环境,想直接写字符串的话要用单引号''。

<div id="app">
    <p v-html="msg"></p>
    <p v-text="msg"></p>
    <p>{{msg}}</p>
</div>

let app = new Vue({
    el: '#app',
    data: {
        msg: '这是a链接:<a href="http://www.baidu.com">点击跳转至百度首页</a>',
    },
});

 

2.属性绑定
　　语法：v-bind:属性名=""
　　简写模式(语法糖)：:属性名=""
　　动态绑定style属性:
　　　　语法：:style="数组/对象(常用)/行间样式字符串"
　　动态绑定class属性:
　　　　语法：:class="数组/对象"

.p_style {
    color: #ffffff;
    background-color: red;
}

<div id="app">
    <p v-bind:title="msg">v-bind</p>
    <p :title="msg">v-bind</p>

    <div :style="divStyle1"></div>
    <div :style="divStyle2"></div>
    <div :style="divStyle3"></div>

    <p :class="className">这是段落1标签</p>
    <p :class="{p_style:true}">这是段落2标签</p>
    <p :class="{p_style:isAddClass}">这是段落3标签</p>
</div>

let app = new Vue({
     el: '#app',
     data: {
         msg: '鼠标悬停几秒钟查看此处动态绑定的提示信息！',
         divStyle1: {width: '500px', height: '15px', background: 'red'},
         divStyle2: [{width: '500px'}, {height: '15px', background: 'green'}],
         divStyle3: "width: 500px;height: 15px; background: blue",
         className: {p_style: true},
         isAddClass: true,
     },
 });

 

3.事件绑定
　　语法：
　　　　v-on:事件名="函数名/函数名()/简单的语句"
　　语法糖：
　　　　@事件名="函数名/函数名()/简单的语句"
　　注意：
　　　　a. 绑定函数时，函数名后的小括号可加可不加，取决于是否需要传递参数，如果需要传参，必须加小括号。
　　　　b. 绑定函数时，没加小括号，系统默认第一个形参为事件对象。
　　　　c. 绑定函数时，加了小括号，需要通过传入$event获取事件对象。
　　　　d. 事件函数里可以直接同过this.变量名获取data里的数据源变量。

<div id="app">
    <button v-on:click="btnClick1">按钮1,无参</button>
    <button v-on:click="btnClick2(1,msg,'abc')">按钮2,有参</button>
    <button @click="btnClick3">无小括号获取事件对象</button>
    <button @click="btnClick4(1,2,$event)">有小括号获取事件对象</button>
    <button @click="changeData">点击修改data数据源</button>
</div>

 

let app = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World!',
    },
    //事件对应的触发函数，写到methods字段里
    methods: {
        btnClick1() {
            console.log('按钮1被点击了!');
        },
        btnClick2(a, b, c) {
            console.log(a, b, c);//1,"Hello World!","abc"
        },
        btnClick3(e) {
            console.log(e);//event
        },
        btnClick4(a, b, c) {
            console.log(a, b, c);//1,2,event
        },
        changeData() {
            this.msg = 'Hello Vue!';
        },
    }
});

事件修饰符：
    我们之前在处理事件时，有一些固定的且常用的书写语法，vue觉得没必要写的过于复杂，所以提供了更简便的书写方式。
    语法：
        @事件名.修饰符1.修饰符2....=""
        1.阻止事件冒泡        stop
        2. 阻止默认事件执行   prevent
        3. 一次性事件         once
        4. 键盘事件修饰符
            left、right、up、down、enter、tab、Ctrl、space、shift、alt或者直接.keyCode值

1.4 双向数据绑定
　　v-model指令
　　vue中默认的数据绑定是单向的，即model --> view,想要实现model和view的相互影响，请使用v-model绑定数据，v-model指令一般用于表单元素。
　　原理：通过input事件实时改变data数据源中的数据。
　　　　<p>{{model}}</p>
　　　　<input type="text" :value="model" @input="model=$event.target.value">

如何解决vue里面的文本闪烁问题？
　　文本闪烁：当加载vue.js文件不及时时，会导致vue的语法无法继续加载，页面会显示vue的原始语法，用户体验不好。
　　解决办法：我们可以使用v-cloak指令解决,当vue.js文件没加载时，v-bloak会被识别为普通的自定义属性，
　　　　　　　我们让添加了该属性的元素display:none;一旦vue.js加载完毕，v-bloak就会被vue识别为指令，
　　　　　　　然后将v-bloak属性去除，则display:none;样式失效，进而显示内容。

[v-bloak] {
    display: none;
 }

<p v-cloak>{{'Hello Vue!'}}</p>

作者：我和鸽子有个约会
出处：<ahref="http://www.cnblogs.com/gugugu/"target="_blank">http://www.cnblogs.com/gugugu/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。