vue.js使用总结

Vue.js简介：

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

Vue.js的核心库只关注视图层

vue.js的实例化

实例化vue.js对象的方式：通过vue的构造器new Vue({options})

获取对象的相关数据可以通过.来实现，如果想要获取options的数据比如el,data,methods,filters等就需要添加前缀$比如：vuetest.#el

Vue.js主要指令：

1>.v-bind数据绑定

//通用html模板<div id="demo1">    <div v-bind:class="vuecls">{{ message }}</div></div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        data: {            message: "hello vue.js",            vuecls: "cls1"        }    });</script>上面等同于：<div id="demo1">    <div class="cls1">hello vue.js</div></div>

v-bind也可以简写成引号：

v-bind:style可以动态设置指定的样式值

<div v-bind:style="{color: vuecolor}">初使用</div>

2>.v-model数据双向绑定

<div id="demo1">    <p>{{ message }}</p>    <input type="text" v-model="message" /></div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        data: {            message: "hello vue.js"        }    });</script>当在input输入框里面改变原始数据时，p标签的内容也响应随着改变；同样，在控制台通过test.message来改变时，他们也会进行改变,从而实现数据的双向绑定

v-model可以添加指定后缀，用于修改相关操作

1.v-model.lazy: 可以指定双向绑定发生在change事件，而双向绑定默认发生在keyup事件中2.v-model.number：可以自动将用户输入的数据转换成数字类型，通常用在number的input输入框3.v-model.trim: 可以自动过滤掉输入的字符串两边的空格

3>.v-html用于输出html格式语句

<div id="demo1" v-html="message"></div><script src="js/vue.min.js"></script><script>    var vue1 = new Vue({        el: "#demo1",        data: {            message: :"<h1>你好Vue</h1>"        }    });</script>等同于:<div id="demo1">    <h1>你好Vue</h1></div>

4>.v-if指定性显示

<div id="demo1">    <p v-if="seen">hello</p>    <p v-else-if="seen2">hello2</p>    <p v-else>你好</p></div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        data: {            seen: false,            seen1: true        }    });</script>最终显示的数据为hello2，v-if为true才会生成对应的dom元素进行显示

5>.v-on绑定对应的事件

<div id="demo1" v-on:click="vuecli">点我试试</div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        methods: {            vuecli: function(){                alert("你点击我");            }        }    });</script>当对demo1进行点击时，会弹出对应的会话v-on指令可以简写成@

6>.v-show指定显示对应的元素

v-show指令的作用效果和v-if相同，不过实现的原理是不同的，v-if当为false时根本就不会生成对应的dom元素，而v-show不管为true/false，都会生成对应的dom元素，只是当为false时，该元素的display设置为none

7>.v-for迭代数据

<div id="demo1">    <ol>        #1.迭代数组        <li v-for="site in sites">{{ site.name }}</li>        #2.迭代对象        <li v-for="val in vueobj">{{ val }}</li>        #3.迭代键值对数据，这里需要注意的是键在后，值在前        <li v-for="(val, key) in vueobj">{{key}} in {{val}}</li>        #4.迭代键值对数据也可以添加迭代的索引        <li v-for="(val, key, index) in vueobj">{{key}} in {{val}} at {{index}}</li>        #5.直接迭代整数类型数据        <li v-for="n in 10">{{n}}</li>    </ol></div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        data: {            sites: [                {name: "name1"},                {name: "name2"},                {name: "name3"}            ],            vueobj: {                name: "成兮",                age: 20,                sex: "男"            }        }    });</script>

filter过滤器的使用

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数.filter过滤器的使用实例

<div id="demo1">    {{ message | captiontest}}</div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        data: {            message: "hellovue",        },        filter: {            captiontest: function(val){                return val.split("").reverse().join("");            }        }    });</script>在div中显示的数据为hellovue的反转值:euvolleh

也可以在{{…}}中直接对数据进行操作，比如{{ message.split(”).reverse().join(”)}};

vue.js自定义组件

自定义组件包括局部组件和全局组件，全局组件只需要注册就可以在任何vue实例中使用，而局部组件在需要使用的实例中注册即可

全局组件使用实例：<div id="demo1">    <comp1></comp1></div><script src="js/vue.min.js"></script><script>    //注册组件    Vue.component('comp1',{        template: "<h1>component test</h1>"    });    var test = new Vue({        el: "#demo1"    });</script>局部组件使用实例：<div id="demo1">    <comp1></comp1></div><script src="js/vue.min.js"></script><script>    var test = new Vue({        el: "#demo1",        components: {            'comp1': {                template: "<h1>component test</h1>"            }        }    });</script>