vue.js学习

程序员文章站 2024-03-23 08:09:40

...

走进vue

第一个文件

建立工程project，设定assest文件夹放入js和css，index.html为入口文件，工程下放html文件夹。
进行npm init生成Json文件。
分别在html中写入代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../asset/js/vue.min.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <!-- 链接 -->
    <a href="./html/study.html">学习走进vue</a>

</body>
</html>

study.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        {{message}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

vue.js学习

v-if,v-else,v-show

v-if,v-else
当需要的时候加载出来，当不需要的时候不加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app" >
        <!-- 将参数在对象的位置中保存下来 -->
        <div v-if='isLogin'>
            你好，黄瑞琪
        </div>
        <div v-else>
            请登录！
        </div>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                isLogin:true
            }
        })
    </script>
</body>
</html>

v-show
这里控制的就是display的属性，当为真的时候就是Block。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app" >
        <!-- 将参数在对象的位置中保存下来 -->
        <div v-show='isLogin'>
            你好，黄瑞琪
        </div>
        <!-- <div v-else>
            请登录！
        </div> -->
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                isLogin:true
            }
        })
    </script>
</body>
</html>

v-for

用类似for-in的语法对数组进行遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        <ul>
            <li v-for='item in items'>
                {{item}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                items:[12,34,43,23,54,23,45]
            }
        })
    </script>
</body>
</html>

用computed对数组进行排序
注意在sort(）的时候有bug，需要自己写一个排序函数来代替
在for-in结构的时候不能再用原来的items，必须要用新计算好的数据，并且，名字不能重复，因为会保护原来的data里面的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        <ul>
            <!-- 不能再用Item了 -->
            <li v-for='item in sortItem'>
                {{item}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                items:[12,34,43,23,54,23,45]
            },
            //进行计算函数
            computed:{
                sortItem : function() {
                    return this.items.sort(sortAB);
                }
            }
        })
        //消除js的sort的bug
        function sortAB(a, b) {
            return a-b;
        }
    </script>
</body>
</html>

对象的排序循环

将排序单独用函数写出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        <ul>
            <!-- 不能再用Item了 -->
            <li v-for='item in sortItem'>
                {{item}}
            </li>
            <li v-for='student in sortStudent'>
                {{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                items:[12,34,43,23,54,23,45],
                students:[
                    {"name":"黄瑞琪","age":0},
                    {"name":"大黄","age":21},
                    {"name":"二黄","age":18},
                    {"name":"阿黄","age":16}
                ]
            },
            //进行计算函数
            computed:{
                sortItem : function() {
                    return this.items.sort(sortAB);
                },
                sortStudent: function() {
                    return sortByKey(this.students, 'age');
                }
            }
        })
        //消除js的sort的bug
        function sortAB(a, b) {
            return a-b;
        }
        //数组对象方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
              var x=a[key];
              var y=b[key];
              return ((x<y)?-1:((x>y)?1:0));
           });
        }

    </script>
</body>
</html>

vue.js学习

v-text,v-html

v-text
其实就是{{}}的一个功能体现，但是他的用户体验更好，因为在加载不出来的时候就不会显现{{}}，当没有内容的时候也不会显现出来。
```
<span v-text = 'message'>

</span>
```

v-html
是一个能感应出代码的东西，他的变量可以是一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        <!-- {{message}} -->
        <span v-text = 'message'>

        </span>
        <span v-html = 'ex'>

        </span>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!',
                ex: '<h1>hello Vue</h1>'
            }
        })
    </script>
</body>
</html>

vue.js学习

v-on

加入方法，对事件进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        本场比赛得分：{{count}}
        <button v-on:click='jiafen'>加分</button>
        <button @click='jianfen'>减分</button>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                count: 1
            },
            methods:{
                jiafen: function() {
                    this.count++;
                },
                jianfen: function() {
                    this.count--;
                }
            }
        })
    </script>
</body>
</html>

可以用@来代替v-on

可以加入数据源对数据进行改动，当回车的时候将input里面的数加载count上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        本场比赛得分：{{count}}
        <button v-on:click='jiafen'>加分</button>
        <button @click='jianfen'>减分</button>
        <input type="text" name="" @keyup.enter='onEnter' v-model='fenshu2'>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                count: 1,
                fenshu2: 2
            },
            methods:{
                jiafen: function() {
                    this.count++;
                },
                jianfen: function() {
                    this.count--;
                },
                onEnter: function() {
                    this.count = this.count + parseInt(this.fenshu2);
                }
            }
        })
    </script>
</body>
</html>

vue.js学习

可以将enter改为数字

v-model

input的简单双向绑定，同上一节。
一些修饰符：lazy(当Input框失去焦点以后才把Input框里面的值显出),number（当输入框里面输入不是数字的值时，不会显现出来，但是一开始输入非数字就会显现）,trim（消去空格）

当多选与单选的情况出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{fenshu2}}<br>
        v-model<input type="text" name="" v-model='fenshu2'><br>
        v-model.lazy<input type="text" name="" v-model.lazy='fenshu2'><br>
        v-model.number<input type="text" name="" v-model.number='fenshu2'><br>
        v-model.trim<input type="text" name="" v-model.trim='fenshu2'>
        <h3>多选项一个值</h3>
        <input type="checkbox" name="" id="isTrue" v-model='isTrue'>
        <label for='isTrue'>{{isTrue}}</label>
        <h3>多选项多值</h3><br>
         <input type="checkbox" name="" id="hua" value="hua" v-model='name'>
        <label for='hua'>hua</label>
         <input type="checkbox" name="" id="huan" value="huan" v-model='name'>
        <label for='huan'>huan</label>
         <input type="checkbox" name="" id="huang" value="huang" v-model='name'>
        <label for='huang'>huang</label><br>
        {{name}}
        <h3>单选项多值</h3><br>
        <input type="radio" name="sex" value="男" v-model='sex'>男
        <input type="radio" name="sex" value="女" v-model='sex'>女<br>
        你选择是{{sex}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                fenshu2: 2,
                isTrue: true,
                name: [],
                sex: "男"
            }
        })
    </script>
</body>
</html>

v-bind

这个属性是可以随时改变Html标签的内容，比如id,class,style,src等。
关于class有一些做法。其中，可以缩写成：
vue.js学习

其他指令

v-pre
在网页输出原始值，输出{{message}}
```
<div v-pre>
    {{message}}
</div>
```

v-cloak\
与css样式一起使用，在网页渲染完所有Dom以后发出作用

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>
<div v-cloak>
  {{ message }}
</div>

v-once
就是只有第一次绑定有作用，后面就不在受控制

<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>

全局API

Vue.directive

通过这个方法来定义自己想要的指定功能，在回调函数里面写具体功能，el参数指的是绑定的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        <p v-huang ='color'>本场比赛得分：{{count}}</p>
        <button @click='jiafen'>加分</button>
    </div>

    <script type="text/javascript">
        Vue.directive('huang', function(el, binding) {

            //el表示绑定的位置
            console.log(el);
            //通过el修改样式
            el.style='color:'+binding.value;
        });
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                count: 1,
                fenshu2: 2,
                color:'yellow'
            },
            methods:{
                jiafen: function() {
                    this.count++;
                }

            }
        })
    </script>
</body>
</html>

具有钩子函数在不同情况下的功能使用
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

unbind:只调用一次，指令与元素解绑时调用

Vue.directive('huang', {
            bind:function(el, binding){//被绑定
                 console.log('1 - bind');
                el.style='color:'+binding.value;
            },
            inserted:function(){//绑定到节点
                  console.log('2 - inserted');
            },
            update:function(){//组件更新
                  console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                  console.log('4 - componentUpdated');
            },
            unbind:function(){//解绑
                  console.log('5 - unbind');
            }

        });

Vue.extend

对于原HTML插入模板，将内容填充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <author>

        </author>
    </div>

    <script type="text/javascript">
        var author = Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data: function(){
                return {
                    authorName:'huang',
                    authorUrl:'http://www.jspang.com'
                }
            }

        });
        // 将此扩展与原来的标签连接
        new author().$mount('author');
    </script>
</body>
</html>

Vue.set

非数组
Vue.set(app,name,value);可以用原生代替
数组
Vue.set(app,name,position,value);不可以用原生代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        {{message}}<br>
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
    </div>
    <button onclick="jia()">jia</button>
    <script type="text/javascript">
        function jia() {
            //为不是数组
            Vue.set(content,'message',4);
            //位数组
            Vue.set(content,arr, 2, "hj");

        }
        var content = {
            message: "haha",
            arr:["q","w","d"]
        } 
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data: content
        })
    </script>
</body>
</html>

Vue的生命周期

分别在不同时刻的表现，其中想让app销毁就用app.$destroy()函数来执行销毁
beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ console.log('2-created 创建完成'); }, beforeMount:function(){ console.log('3-beforeMount 挂载之前'); }, mounted:function(){ console.log('4-mounted 被创建'); }, beforeUpdate:function(){ console.log('5-beforeUpdate 数据更新前'); }, updated:function(){ console.log('6-updated 被更新后'); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log('9-beforeDestroy 销毁之前'); }, destroyed:function(){ console.log('10-destroyed 销毁之后') }

Vue的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        {{message}}
    </div>
    <!-- 第二种写法 -->
   <!--  <template id="demo">
        <h1>我是模板</h1>
    </template> -->
    <!-- 第三种写法 -->
    <script type="x-template" id="demo">
        <h1>我是模板</h1>
    </script>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!'
            },
            //第一种写法
            // template:`
            //     <h1>我是模板</h1>
            // `
            template:'#demo'
        })
    </script>
</body>
</html>

Vue.conponent

全局组件用Vue.component(”,{})，这种组件在任何的vue作用域都可以使用，但是在作用域之外不可以使用
局部组件则在单独的一个vue构造器里面写一个components:{}的对象，这种组件只试用于一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <huang></huang>
        <hug></hug>
    </div>
    <script type="text/javascript">
        //全局组件
        Vue.component('huang',{
            template:`
                <h3>我是huang全局组件</h3>
            `
        });
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!'
            },
            //局部组件
            components:{
                'hug':{
                    template:`
                    <h3>我是hug局部组件</h3>
                    `
                }
            }
        });
    </script>
</body>
</html>

props属性用法

将自定义标签的一个自定义的一个变量值传到组件的定义标签里面去，在组件的标签里面加入props数组。

<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <hug here='China'></hug>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!'
            },
            //局部组件
            components:{
                'hug':{
                    template:`
                    <h3>熊猫来自{{here}}</h3>
                    `,
                    props:['here']
                }
            }
        });
    </script>
</body>

也可以通过data里面的值传值，这时候就用到了v-bind绑定

<div id="app">
        <hug :here='message'></hug>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'China'
            },
            //局部组件
            components:{
                'hug':{
                    template:`
                    <h3>熊猫来自{{here}}</h3>
                    `,
                    props:['here']
                }
            }
        });

组件的父子关系

在构造器外面传入定义标签内容

var hug = {
            template:`
                    <h3>我是hug构造器外部局部组件</h3>
                    `
            };
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!'
            },
            //局部组件
            components:{
                'hug':hug
            }
        });

加入子组件，直接在父组件模板加入子标签，将子组件引入。

var city = {
            template:`
                    <h3>我是hug子组件</h3>
                    `
        }
        var hug = {
            //在模板插入子组件
            template:`
                    <div>
                        <p>
                            haha
                        </p>

                        <city></city>
                    </div>
                    `
                    ,
            components:{
                'city':city
            }
        };
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                message:'hello Vue!'
            },
            //局部组件
            components:{
                'hug':hug
            }
        });

component组件

我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.
我们在构造器的components选项里加入这三个组件
我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <component :is="who"></component>
        <button @click="whoa">change</button>
    </div>
    <script type="text/javascript">
        var city = {
            template:`
                    <h3>我是hug子组件</h3>
                    `
        }
        var hug = {
            //在模板插入子组件
            template:`
                    <div>
                        <p>
                            haha
                        </p>
                    </div>
                    `

        };
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                who:'hug'
            },
            //局部组件
            components:{
                'hug':hug,
                'city':city
            },
            methods: {
                whoa: function() {
                    if(this.who=="hug") {
                        this.who="city"
                    } else {
                        this.who="hug"
                    }
                }
            }
        });
    </script>
</body>
</html>

propsData选项

利用Vue.extend的知识，在里面模板加入变量，在挂载的时候将propsData里面的对象加入变量传值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <author>

        </author>
    </div>

    <script type="text/javascript">
        var author = Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}-{{num}}</a></p>",
            data: function(){
                return {
                    authorName:'huang',
                    authorUrl:'http://www.jspang.com'
                }
            },
            props:['num']
        });

        //用propsData来传递num
        new author({propsData:{num:1}}).$mount('author');
    </script>
</body>
</html>

computed选项

计算return出直接想要的值，可以返回加了字符串的数字
也可以利用reverse()进行反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{jiayuan}}<br>
        <ul>
            <li v-for='newa in fanzhuan'>
                {{newa.title}}----{{newa.date}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var newsList=[
            {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
            {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
            {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
            {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
        ];
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                price: 12,
                newsLista: newsList 
            },
            //进行计算函数
            computed:{
               jiayuan: function () {
                    return this.price = "￥" + this.price + "元"
               },
               fanzhuan: function() {
                    return this.newsLista.reverse();
               }
            }
        })

    </script>
</body>
</html>

methods选项

可以再函数里面传参数
可以在参数里面加$event，用来得到点击事件的一些原生数据，比如位置横坐标，纵坐标
在构造器作用域外面调用方法，用app.add(）类似的调用
如果自己构造一个标签，比如btn的标签，模板是button，那么再掉用的时候就用@click.native=”“来调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <!-- 将参数在对象的位置中保存下来 -->
        本场比赛得分：{{count}}
        <button v-on:click='jiafen($event)'>加分</button>
        <button @click='jianfen(2)'>减分</button>
        <btn @click.native='jianfen'></btn>
        <input type="text" name="" @keyup.enter='onEnter' v-model='fenshu2'>
    </div>
    <button onclick='app.jianfen(2)'>减分3</button>
    <script type="text/javascript">
        var btn = {
            template:`
                     <button>减分2</button>
                    `
        }
        var app=new Vue({
            el:'#app',
            //为内容的对象
            data:{
                //为一个参数
                count: 1,
                fenshu2: 2
            },
            components:{
                "btn":btn
            },
            methods:{
                jiafen: function(event) {
                    this.count++;
                    console.log(event);
                },
                jianfen: function(num) {
                    this.count = this.count - num;
                },
                onEnter: function() {
                    this.count = this.count + parseInt(this.fenshu2);
                }
            }
        })
    </script>
</body>
</html>

watch选项

用来检测某些值的变化，以进行不同的功能展示

 watch:{
                //参数为新值和旧值
                temperature:function(newVal,oldVal){
                    if(newVal>=26){
                        this.suggestion=suggestion[0];
                    }else if(newVal<26 && newVal >=0)
                    {
                        this.suggestion=suggestion[1];
                    }else{
                        this.suggestion=suggestion[2];
                    }

                }
            }

如果在构造器外部进行检测的话，为了减少耦合性，就用app.$watch(‘xxx’,function(newVal, oldVal){})

Mixin选项

当在临时加入某个选项的功能的时候，就可以用Mixin选项，在构造器中是一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Mixins Option Demo</title>
</head>
<body>
    <h1>Mixins Option Demo</h1>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <p>count:{{ count }}</p>
        <P><button @click="add">增加数量</button>
        <button @click="jian">减少数量</button>
        </P>
    </div>

    <script type="text/javascript">
        //额外临时加入时，用于显示日志
        var addLog={
            updated:function(){
                console.log("数据放生变化,变化成"+this.num+".");
            }
        }
        var app=new Vue({
            el:'#app',
            data:{
                num:1,
                count:2
            },
            methods:{
                add:function(){
                    this.num++;
                    this.count++;
                },
                jian:function(){
                    this.num--;
                    this.count--;
                }
            },
            mixins:[addLog]//混入
        })
    </script>
</body>
</html>

但是先执行Mixin里面的内容再执行构造器里面的内容
还有全局构造器的方法

Vue.mixin({
    updated:function(){
        console.log('我是全局被混入的');
    }
})

extend选项

这个与上面相似，对构造器里面的内容进行扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Extends Optin Demo</title>
</head>
<body>
    <h1>Extends Optin Demo</h1>
    <hr>
    <div id="app">
        {{message}}
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">
        var bbb={
            created:function(){
                console.log("我是被扩展出来的");
            },
            methods:{
                add:function(){
                    console.log('我是被扩展出来的方法！');
                }
            }
        };
        var app=new Vue({
            el:'#app',
            data:{
                message:'hellao Vue!'
            },
            methods:{
                add:function(){
                    console.log('我是原生方法');
                }
            },
            extends:bbb
        })
    </script>
</body>
</html>

delimiters 选项

delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。将{{}}改为${}

delimiters:['${','}']

一些内置的组件

$mounted()挂载

var vm = new jspang().$mount("#app")

$destroy()下挂载

vm.$destroy();

$forceUpdate() 更新方法

vm.$forceUpdate() ;

$nextTick() 数据修改方法
当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。

function tick(){
    vm.message="update message info ";
    vm.$nextTick(function(){
        console.log('message更新完后我被调用了');
    })
}

实例事件

$o n 在构造器外部添加事件。如果按钮在作用域外部，可以利用$ emit来执行。

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.num--;
});
//外部调用内部事件
function reduce(){
    app.$emit('reduce');
}

$once执行一次的事件

app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.num--;

});

$off关闭事件

function off(){
   app.$off('reduce');
}

slot组件

就是将位置插入模板里面应有的位置上，通过name的值来产生联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assest/js/vue.js"></script>
    <title>Slot content extend Demo</title>
</head>
<body>
    <h1>Slot content extend Demo</h1>
    <hr>
    <div id="app">
    <jspang>
        <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
        <span slot="netName">{{jspangData.netName}}</span>    
        <span slot="skill">{{jspangData.skill}}</span>    
    </jspang>
    </div>


<template id="tmp">
    <div>
        <p>博客地址：<slot name="bolgUrl"></slot></p>
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>

    </div>
</template>

    <script type="text/javascript">
        var jspang={
            template:'#tmp'
        }

        var app=new Vue({
            el:'#app',
            data:{
               jspangData:{
                   bolgUrl:'http://jspang.com',
                   netName:'技术胖',
                   skill:'Web前端'
               }
            },
            components:{
                "jspang":jspang
            }
        })
    </script>
</body>
</html>

上一篇： Spring Cloud入门笔记（二）服务注册与消费

下一篇： Spring黑马笔记入门二

vue.js学习

走进vue

第一个文件

v-if,v-else,v-show

v-for

v-text,v-html

v-on

v-model

v-bind

其他指令

全局API

Vue.directive

Vue.extend

Vue.set

Vue的生命周期

Vue的模板

Vue.conponent

props属性用法

组件的父子关系

component组件

propsData选项

computed选项

methods选项

watch选项

Mixin选项

extend选项

delimiters 选项

一些内置的组件

实例事件

slot组件

Spring入门学习笔记

学习vue.js

vue.js 学习

vue.js学习

Hadoop学习笔记(2)-HDFS的基本操作(Shell命令)

Vue.js学习

Vue.js学习

hadoop学习之HDFS命令行操作

hadoop学习03——JavaAPI操作HDFS

Opencv学习笔记（九）图像row、col坐标对应关系