从零开始学习vue(2)

时间：2024-01-09 21:52:32

一.vue实例

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

var vm = new Vue({

   //选项对象

})

在这其中vm(viewModel的简称)通常都表示vue实例的变量名。当创建一个vue实例，你都可以传入一个选项对象作为参数，完整的选项对象，你可能需要查看API文档。

一个vue应用应该由一个通过new Vue构造的根实例和许多可嵌套可复用的组件构成，这也就是说所有的组件都是vue实例。

二.数据与方法

当一个vue实例被创建完成之后，就会向它的vue响应系统中加入了data对象中能找到的所有属性，当这些属性的值发生改变之后，视图就会发生响应，也就是更新相应的值。我们来看一个例子:

//源数据对象

var obj = { name:"eveningwater" };

//构建实例

var vm = new Vue({

   data:obj

})

//这两者是等价的

vm.name === obj.name;

//这也就意味着

//修改data对象里的属性也会影响到源数据对象的属性

vm.name = "waterXi";

obj.name;//"waterXi"

//同样的，修改源数据对象的属性也会影响到data对象里的属性

obj.name = 'stranger';

vm.name;//"stranger"

可能需要注意的就是，只有data对象中存在的属性才是响应式的，换句话说，你为源数据对象添加一个属性，根本不会影响到data对象。如:

obj.sex = "男";

vm.sex;//undefined

obj.sex;//'男'

obj.sex = "哈哈哈";

vm.sex;//undefined

这也就意味着你对sex的修改并不会让视图更新，如此一来，你可能需要在data对象中初始化一些值，如下:

data:{

   str:'',

   bool:false,

   arr:[],

   obj:{},

   err:null,

   num:0

}

查看此处具体示例。

只是还有一个例外Object.freeze(),这个方法就相当于锁定（冻结）一个对象，使得我们无法修改现有属性的特性和值，并且也无法添加新属性。因此这会让vue响应系统无法追踪变化:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>freeze</title>

  </head>

  <body>

    <div id="app">

      <span>{{ message }}</span>

      <button type="button" v-on:click="reverseMessage">反转信息</button>

    </div>

    <script>

        //这里写JavaScript代码

    </script>

  </body>

</html>

js代码如下:

      var obj = {

          message: "hello,vue.js!"

      }

      //阻止对象

      Object.freeze(obj);

      var app = new Vue({

        el: "#app",

        data:obj,

        methods: {

          reverseMessage: function() {

            this.message = this.message.split("").reverse().join("");

          }

        }

      });

如此一来，无论我们怎么点击按钮，都不会将信息反转，甚至页面还会报错，如下图:

从零开始学习vue(2)
可前往此处具体示例自行查看效果。

当然除了数据属性以外，vue还暴露了一些有用的实例属性和方法，它们通常都带有$前缀，这样做的方式是以便与用户区分开来。来看一个示例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>property</title>

  </head>

  <body>

    <div id="app">

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

     name:'eveningwater'

  }

  var vm = new Vue({

    data:obj,

  });

  //这行代码表示将vue实例挂载到id为app的DOM根节点上，相当于在实例的选项对象中的el选项，即

  //el:'#app'

 vm.$mount(document.querySelector('#app'))

 //数据是相等的

 vm.$data === obj;//true

 //挂载的根节点

 vm.$el === document.querySelector('#app');//true

 //以上两个属性都是实例上的属性，接下来还有一个watch即监听方法是实例上的方法

 vm.$watch('name',function(oldValue,newValue){

   //数据原来的值

   console.log(oldValue);

   //数据最新的值

    console.log(newValue);

 })

接下来，可以尝试在浏览器控制台修改name的值,你就会发现watch()方法的作用了，如下图所示:

从零开始学习vue(2)

这个示例可前往具体示例。

三.实例生命周期

每个vue实例在被创建的时候都会经历一些初始化的过程，这其中提供了一些生命周期钩子函数，这些钩子函数代表不同的生命周期阶段，这些钩子函数的this就代表调用它的那个实例。对于生命周期，有一张图:

从零开始学习vue(2)

你不需要立即这张图所代表的含义，我们来看一个示例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>vue life cycle</title>

  </head>

  <body>

    <div id="app">

        <span>vue生命周期</span>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

     name:'eveningwater'

  }

  var app = new Vue({

    data:obj,

    beforeCreate:function(){

        //此时this指向app这个vue实例,但并不能得到data属性，因此this.name的值是undefined

        console.log('实例被创建之前，此时并不能访问实例内的任何属性' + this.name)

    }

  });

关于生命周期的全部理解，我们需要理解后续的组件知识，再来补充，此处跳过。这个示例可前往具体示例

四.模板语法

vue使用基于HTML的模板语法，在vue的底层是将绑定数据的模板渲染成虚拟DOM，并结合vue的响应式系统，从而减少操作DOM的次数，vue会计算出至少需要渲染多少个组件。

最简单的模板语法莫过于插值了，vue使用的是Mustache语法（也就是双大括号"{{}}"）。这个只能对文本进行插值，也就是说无论是字符串还是标签都会被当作字符串渲染。如:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Mustache</title>

  </head>

  <body>

    <div id="app">

        <span>{{ greeting }}World!</span>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

 var obj = { greeting:"Hello,"};

 var vm = new Vue({

    data:obj

 });

 vm.$mount(document.getElementById('app'));

如此以来Mustache标签就会被data对象上的数据greeting给替代,而且我们无论怎么修改greeting的值，视图都会响应,具体示例。

我们还可以使用v-once指令对文本进行一次性插值，换句话说，就是这个指令让插值无法被更新:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Mustache</title>

  </head>

  <body>

    <div id="app">

        <span v-once>{{ greeting }}World!</span>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

 var obj = { greeting:"Hello,"};

 var vm = new Vue({

    data:obj

 });

 vm.$mount(document.getElementById('app'));

在浏览器控制台中我们输入vm.greeting="stranger!"可以看到视图并没有被更新，这就是这个指令的作用，我们需要注意这个指令对数据造成的影响。具体实例

既然双大括号只能让我插入文本，那要是我们要插入HTML代码，我们应该怎么办呢?v-html这个指令就可以让我们插入真正的HTML代码。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-html</title>

  </head>

  <body>

    <div id="app">

        <p>{{ message }}</p>

        <p v-html="message"></p>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

 var obj = { message:"<span style='color:#f00;'>hello,world!</span>"};

 var vm = new Vue({

    data:obj

 });

 vm.$mount(document.getElementById('app'));

页面效果如图所示;

从零开始学习vue(2)

可前往具体示例。

关于HTML特性，也就是属性，我们需要用到v-bind指令，例如:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-bind</title>

  </head>

  <body>

    <div id="app">

        <div v-bind:id="propId">使用v-bind指令给该元素添加id属性</div>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

 var obj = { propId:"myDiv"};

 var vm = new Vue({

    data:obj

 });

 vm.$mount(document.getElementById('app'));

打开浏览器控制台，定位到该元素，我们就能看到div元素的id属性为"myDiv",如下图所示:

从零开始学习vue(2)

具体示例。

在绑定与元素实际作用相关的属性，比如disabled，这个指令就被暗示为true,在默认值是false,null,undefined,''等转换成false的数据类型时，这个指令甚至不会表现出来。如下例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-bind</title>

  </head>

  <body>

    <div id="app">

        <button type="button" v-bind:disabled="isDisabled">禁用按钮</button>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

 var obj = { isDisabled:123};

 var vm = new Vue({

    data:obj

 });

 vm.$mount(document.getElementById('app'));

这样一来，无论我们怎么点击按钮都没用，因为123被转换成了布尔值true，也就表示按钮已经被禁用了，我们可以打开控制台看到:

从零开始学习vue(2)

你可以尝试这个示例具体示例。

在使用模板插值的时候，我们可以使用一些JavaScript表达式。如下例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>expression</title>

  </head>

  <body>

    <div id="app">

      <p>{{ number + 1 }}</p>

      <p>{{ ok ? "确认" : "取消" }}</p>

      <p>{{message.split("").reverse().join("")}}</p>

      <div v-bind:id="'my' + elementId">

        元素的id为<span :style="{ 'color':color }">myDiv</span>

      </div>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

 var obj = {

    number: 123,

    ok: true,

    message: "hello,vue.js!",

    elementId: "Div",

    color: "red"

  };

  var vm = new Vue({

    data: obj

  });

  vm.$mount(document.getElementById("app"));

这些JavaScript表达式都会被vue实例作为JavaScript代码解析,具体示例。

值得注意的就是有个限制，只能绑定单个表达式，像语句是无法生效的。如下例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>sentence</title>

  </head>

  <body>

    <div id="app">

      <p>{{ var number = 1 }}</p>

      <p>{{ if(ok){ return '确认'} }}</p>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

    number: 123,

    ok: true

  };

  var vm = new Vue({

    data: obj

  });

  vm.$mount(document.getElementById("app"));

像这样直接使用语句是不行的，浏览器控制台报错，如下图:

从零开始学习vue(2)

不信可以自己试试具体示例。

指令（Directives）是带有v-前缀的特殊特性，通常指令的预期值就是单个JavaScript表达式（v-for除外）,例如v-if与v-show指令，前者表示DOM节点的插入和删除，后者则是元素的显隐。所以，指令的职责就是根据表达式值的改变，响应式的作用于DOM。现在我们来看两个示例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-if</title>

  </head>

  <body>

    <div id="app">

      <p v-if="value === 1">{{ value }}</p>

      <p v-else-if="value === 2">{{ value }}</p>

      <p v-else>{{ value }}</p>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

    value: 1

  };

  var vm = new Vue({

    el: "#app",

    data() {

      return obj;

    }

  });

运行在浏览器效果如图:

从零开始学习vue(2)

现在你可以尝试在浏览器控制台更改vm.value = 2和vm.value = 3我们就可以看到页面的变化。你也可以狠狠点击此处具体示例查看和编辑。

我们再看v-show的示例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-show</title>

  </head>

  <body>

    <div id="app">

      <p v-show="value === 1">{{ value }}</p>

      <p v-show="value === 2">{{ value }}</p>

      <p v-show="value === 3">{{ value }}</p>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

var obj = {

   value:1

}

var vm = new Vue({

    data:obj

});

vm.$mount(document.querySelector('#app'))

然后查看效果如图:

从零开始学习vue(2)
尝试在控制台修改vm.value = 2和vm.value = 3我们就可以看到页面的变化。你也可以狠狠点击具体示例查看。

从上面两个示例的对比，我们就可以看出来v-show与v-if指令的区别了，从切换效果来看v-if显然不如v-show,这说明v-if有很大的切换开销，因为每一次切换都要不停的执行删除和插入DOM元素操作，而从渲染效果来看v-if又比v-show要好，v-show只是单纯的改变元素的display属性，而如果我们只想页面存在一个元素之间的切换，那么v-if就比v-show要好，这也说明v-show有很大的渲染开销。

而且v-if还可以结合v-else-if与v-else指令使用，而v-show不能，需要注意的就是v-else必须紧跟v-if或者v-else-if之后。当需要切换多个元素时,我们还可以使用template元素来包含，比如:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>template</title>

  </head>

  <body>

    <div id="app">

        <template v-if="value > 1">

            <p>{{ value }}</p>

            <h1>{{ value }}</h1>

        </template>

        <template v-else>

            <span>{{ value }}</span>

            <h2>{{ value }}</h2>

        </template>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

    value: 1

  };

  var vm = new Vue({

    el: "#app",

    data() {

      return obj;

    }

  });

此时template相当于一个不可见元素，如下图所示:

从零开始学习vue(2)
尝试在控制台修改vm.value = 2就可以看到效果了，你也可以狠狠的点击此处具体示例。

对于可复用的元素，我们还可以添加一个key属性，比如:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>key</title>

  </head>

  <body>

    <div id="app">

      <template v-if="loginType === 'username'">

        <label>username:</label>

        <input type="text" key="username" placeholder="enter your username" />

      </template>

      <template v-else-if="loginType === 'email'">

        <label>email:</label>

        <input type="text" key="email" placeholder="enter your email" />

      </template>

      <template v-else>

        <label>mobile:</label>

        <input type="text" key="mobile" placeholder="enter your mobile" />

      </template>

      <button type="button" @click="changeType">

        toggle login type

      </button>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

      var obj = {

        loginType: "username",

        count:1

      };

      var vm = new Vue({

        el: "#app",

        data() {

          return obj;

        },

        methods: {

          changeType() {

            this.count++;

            if (this.count % 3 === 0) {

              this.loginType = "username";

            } else if (this.count % 3 === 1) {

              this.loginType = "email";

            } else {

              this.loginType = "mobile";

            }

          }

        }

      });

效果如图:

从零开始学习vue(2)
你可以狠狠的点击具体示例查看。

从这几个示例我们也可以看出v-if就是惰性,只有当条件为真时,v-if才会开始渲染。值得注意的就是v-if与v-for不建议合在一起使用。来看一个示例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-if与v-for</title>

  </head>

  <body>

    <div id="app">

        <ul>

            <li v-for="(item,index) in list" v-bind:key="index" v-if="item.active">

                <span>{{ item.value }}</span>

            </li>

        </ul>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

    list:[

        {

            value:'html',

            active:false

        },

        {

            value:'css',

            active:false

        },

        {

            value:"javascript",

            active:true

        }

    ]

  };

  var vm = new Vue({

    el: "#app",

    data() {

      return obj;

    }

  });

虽然以上代码不会报错，但这会造成很大的渲染开销，因为v-for优先级高于v-if,这就造成每次执行v-if指令时总要先执行v-for遍历一遍数据。你可以点击此处具体示例查看。

遇到这种情况，我们可以使用计算属性。如:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>v-if和v-for</title>

  </head>

  <body>

    <div id="app">

      <ul v-if="newList">

        <li v-for="(item,index) in newList" v-bind:key="index">

          <span>{{ item.value }}</span>

        </li>

      </ul>

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

var obj = {

    list: [

      {

        value: "html",

        active: false

      },

      {

        value: "css",

        active: false

      },

      {

        value: "javascript",

        active: true

      }

    ]

  };

  var vm = new Vue({

    el: "#app",

    //先过滤一次数组

    computed: {

      newList: function() {

       return this.list.filter(function(item) {

          return item.active;

        });

      }

    },

    data() {

      return obj;

    }

  });

如此一来，就减少了渲染开销，你可以狠狠点击这里具体示例查看。

指令的用法还远不止如此，一些指令是可以带参数的，比如v-bind:title,在这里title其实就是被作为参数。基本上HTML5属性都可以被用作参数。比如图片路径的src属性，再比如超链接的href属性，甚至事件的添加也属于参数，如v-on:click中的click其实就是参数。来看一个示例:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <!-- 引入vue.js开发版本 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>param</title>

  </head>

  <body>

    <div id="app">

        <a v-bind:href="url">思否</a>

        <img :src="src" alt="美女" />

    </div>

    <script>

      //这里写JavaScript代码

    </script>

  </body>

</html>

js代码:

  var obj = {

    url: "https://segmentfault.com/",

    src:"http://eveningwater.com/project/imggallary/img/15.jpg"

  };

  var vm = new Vue({

    el: "#app",

    data() {

      return obj;

    }

  });

效果如图所示:

从零开始学习vue(2)

你可以点击此处具体示例查看。

v-on指令还可以添加修饰符,v-bind与v-on指令还可以缩写成:和@。缩写对于我们在繁琐的使用指令的项目当中是一个很不错的帮助。

五.计算属性与侦听器

相关文章