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>