一分钟学会Vue

水深无声 2022-01-05 12:13 334阅读 0赞

# 一、Vue简介 #

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容ECMAScript5的浏览器。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

获取vue.js：

1)、去vue2官网或git下载，地址： [https://github.com/vuejs/vue][https_github.com_vuejs_vue]

2)、使用cdn

3)、安装node.js，使用npm获取，具体的安装细节： [https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]

# 二、使用例子 #

引入vue.js文件

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
    // 选项
    })

vue定义data数据，进行声明式渲染：例子：

html代码：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>vue2介绍</title>
    </head>
    
    <body>
    <div id="app1">
        {
         {message}}
    </div>
    <div id="app2">
        <span v-bind:title="message">
            把鼠标放到这里试试
        </span>
    </div>
    
    <script src="../js/common/vue.js"></script>
    <script type="text/javascript">
        //vue应用对象
        var app1 = new Vue({
            el: "#app1",//绑定使用对象
            data: {
                message: "Hello Vue2!"
            }
        });
        // 我们的数据对象
        var data = {message: "页面加载时间是：" + new Date().toLocaleDateString()}
        //vue应用对象
        var app2 = new Vue({
            el: "#app2",
            data: data // 该对象被加入到一个 Vue 实例中
        });
    </script>
    </body>
    
    </html>

vue在标签中加入不少的属性，其中我整理了一点，具体的看官方文档

v-text ：传递文本：
    v-html：传递HTML标签
    v-once：只渲染元素和组件一次，之后重新渲染，该元素和组件均会被视作静态内容跳过。
    v-if：判断，条件为true
    v-show：是否显示标签，为false时标签为display：none
    v-else：判断，条件为false时
    v-for：循环
    v-on：绑定事件的 如：v-on:click 绑定点击事件
    v-bind：传递属性值，绑定属性，也可以写为“:”
    v-model：绑定value值
    v-ref：获取到整个组件（component）的对象
    v-el：获取到DOM对象
    v-pre：跳过某元素和他的子元素的编译，可以用来显示原始Mustache标签
    v-cloak：使某元素保持某种指定行为，直到与该元素相关的实例编译结束。
    v-on:click：绑定点击事件
    v-on:keyup.enter：监听回车事件
    v-on:keyup：监听键盘事件
    v-on:.delete：监听删除键
    @click：@和v-on是一个意思，@click绑定点击事件
    @change：绑定选择事件，一搬用于下拉框
    number：输入值转为数值类型 v-model.number
    debounce
    transition
    :is
    v-bind:title：绑定标签的title属性

v-text：例子

<p id="test" v-text="'我叫'+student.name+'，今年'+student.age+'岁'"></p>
    <script type="text/javascript">
    　　var app1= new Vue({
    　　　　el : "#test",
    　　　　data : {
    　　　　　　student : {
    　　　　　　　　name : "小明",
    　　　　　　　　age : 18
    　　　　　　}
    　　　　}
    　　});
    </script>

结果：我叫小明，今年18岁

vue组件或者实例中，不管是生命周期钩子函数created还是自定义函数plus，他们中的this都是指当前vue实例。

# 三、Vue生命周期 #

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。  
比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
    data: {
    a: 1
    },
    created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
    }
    })

也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。  
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.＄watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

Vue生命周期视图

![1457724-20190325102843935-1246153150.png][]

1、beforeCreate

在vue实例初始化之后，还没有被创建成功，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2、created

vue实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，＄el 属性目前不可见。

可以在组件的这个期间请求数据，如果是keep-alive组件会被缓存起来，生命周期不会再次触发，如果需要更新数据可以watch当前router变化，如果router是当前组件所在的router则请求数据。

3、beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

4、mounted

vm.＄el已挂载在文档内，对已有dom节点的操作可以在这期间进行。

5、 beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

7、activated

keep-alive 组件激活时调用。

8、deactivated

keep-alive 组件停用时调用。

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

10、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
             <div id="app1">
                <input v-model="msg" /> {
         {msg}}
            </div>
            <button type="button" onclick="destroy()">销毁</button>
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app1 = new Vue({
                    el: "#app1",
                    data:{
                        msg:"我是data数据"
                    },
                    beforeCreate:function(){
                        console.log("Vue实例创建前："+this.$el);
                        console.log("data数据："+this.msg);
                    },
                    created:function(){
                        console.log("Vue实例创建后："+this.msg);
                        console.log("data数据："+this.msg);
                    },
                    beforeMount:function(){
                        console.log("挂载前："+this.$el);
                        console.log("data数据："+this.msg);
                    },
                    mounted:function(){
                        console.log("挂载后："+this.$el);
                        console.log("data数据："+this.msg);
                    },
                    beforeUpdate:function(){
                        console.log("实例更新前："+this.$el);
                        console.log("data数据："+this.msg);
                    },
                    updated:function(){
                        console.log("实例更新后："+this.$el);
                        console.log("data数据："+this.msg);
                    },
                    beforeDestroy:function(){
                        console.log("实例销毁前："+this.$el);
                        console.log("data数据："+this.msg);                                    
                    },
                    destroyed:function(){
                        console.log("实例销毁后："+this.$el);
                        console.log("data数据："+this.msg);
                    }
                });
               function destroy(){
                    app1.$destroy();
                }
            </script>
        </body>
    </html>

运行结果：

![1457724-20190325105639329-889758588.png][]

在文本框输入内容进行修改：

![1457724-20190325105803236-828173751.png][]

点击销毁按钮

![1457724-20190325110015346-962403387.png][]

# 四、方法、处理用户输入计算、监听data数据变化 #

一般我们用v-on进行对标签的绑定事件，实现用户进行交互。绑定事件的方法我们要写到一个集合里面：**methods**

**　**　例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
             <div id="app1">
                <input v-model="msg" /> {
         {msg}}
                <br/>
                <button type="button" v-on:click="show">调用方法</button>
                <button type="button" @click="upMsg">修改msg</button>
           </div>
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app1 = new Vue({
                    el: "#app1",
                    data:{
                        msg:"我是data数据"
                    },
                       methods:{
                           show:function(){
                               console.log("我被执行了");
                           },
                           upMsg:function(){
                               this.msg = "我被修改了";
    　　　　　　　　　　　　　　　　console.log(this.msg);
    
                           }
                   }
                });
            </script>
        </body>
    </html>

结果：

![1457724-20190325111611085-313414325.png][]![1457724-20190325111737276-1138046602.png][]

方便处理data数据的计算：**computed**

**　**　例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                input{
         
                    width: 30px;
                    height: 30px;
                    padding: 5px;
                    border: 1px solid #000;
                    outline:none;
                    text-align: center;
                }
            </style>
        </head>
        <body>
             <div id="app1">
                <input type="text" v-model="i"/> +
                <input type="text" v-model="n"/> = 
                <input type="text" v-model="sum" />
           </div>
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app1 = new Vue({
                    el: "#app1",
                    data:{
                        i:0,
                        n:0
                    },
                       computed:{
                           sum:function(){
                               return parseInt(this.i) + parseInt(this.n);
                               //parseInt 数据类型转换
                           }
                       }
                });
            </script>
        </body>
    </html>

运行结果：

![1457724-20190325113147025-1237984638.png][]　　![1457724-20190325113217815-89874784.png][]

监听data数据变化：**watch**

**　　　**　例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
             <div id="app1">
                <input type="text" v-model="i"/> {
         {i}}
                <input type="text" v-model="n.name"/> {
         {n.name}}
           </div>
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app1 = new Vue({
                    el: "#app1",
                    data:{
                        i:0,
                        n:{
                            name:"张三"
                        }
                    },
                       watch:{
                           //普通的watch监听
                           i(val,oldval){
                               console.log("新值"+val);
                               console.log("旧值"+oldval);
                           },
                           //深度监听，可监听到对象、数组的变化
                           n:{
                            handler(val, oldVal){
         
                                console.log("n.name: "+val.name, oldVal.name);
    　　　　　　　　　　　　　　　　　console.log(val.name === oldVal.name);//但是这两个值为true
                            },
                            deep:true
                        }
                       }
                });
            </script>
        </body>
    </html>

运行结果：

![1457724-20190325114303722-1603348161.png][]![1457724-20190325114727587-145216150.png][]

但是我们的深度监听好像出了问题，val值和oldVal值是一样的。

因为：这样就只能知道对象发生变化却不知道具体哪个值发生了变化

如果想监听对象某一个值得变化可以利用计算属性：**computed**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
             <div id="app1">
                <input type="text" v-model="i"/> {
         {i}}
                <input type="text" v-model="n.name"/> {
         {n.name}}
           </div>
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app1 = new Vue({
                    el: "#app1",
                    data:{
                        i:0,
                        n:{
                            name:"张三"
                        }
                    },
                       watch:{
                           //普通的watch监听
                           i(val,oldval){
                               console.log("新值"+val);
                               console.log("旧值"+oldval);
                           },
                           //这里监听计算方法函数
                           newValue(val,oldval){
                               console.log("data数据对象的原值："+oldval);
                               console.log("data数据对象的新值："+val);
                           }
                       },
                       computed:{
                           newValue() {
        　　　　                return this.n.name
        　　                }
                       }
                });
            </script>
        </body>
    </html>

运行结果：

![1457724-20190325141452234-2014025526.png][]

小结：

computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对  
　　属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。

转载于:https://www.cnblogs.com/yangWanSheng/p/10509481.html

[https_github.com_vuejs_vue]: https://github.com/vuejs/vue
[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html
[1457724-20190325102843935-1246153150.png]: /images/20211229/b403d2dc1fc74d8eb4cf39c6e3d9bca7.png
[1457724-20190325105639329-889758588.png]: /images/20211229/7348ea2e3d9d42c8a32aeeca7eba3bb1.png
[1457724-20190325105803236-828173751.png]: /images/20211229/ccf459fff0384d1e923f0cb6c583f71b.png
[1457724-20190325110015346-962403387.png]: /images/20211229/c41d45a4c49846368c71a7fce8282fb9.png
[1457724-20190325111611085-313414325.png]: https://img2018.cnblogs.com/blog/1457724/201903/1457724-20190325111611085-313414325.png
[1457724-20190325111737276-1138046602.png]: /images/20211229/f0a3186905a846df9eb51717fdea48d1.png
[1457724-20190325113147025-1237984638.png]: https://img2018.cnblogs.com/blog/1457724/201903/1457724-20190325113147025-1237984638.png
[1457724-20190325113217815-89874784.png]: /images/20211229/7de61972c5724eb5a1d72f395bda592e.png
[1457724-20190325114303722-1603348161.png]: https://img2018.cnblogs.com/blog/1457724/201903/1457724-20190325114303722-1603348161.png
[1457724-20190325114727587-145216150.png]: /images/20211229/1174e7bbdd92419cbbc095026c526bdf.png
[1457724-20190325141452234-2014025526.png]: /images/20211229/8be118b3232b4d07acc037296d4752f3.png