Vue.js快速入门教程

2017年12月23日15:54:18 发表评论 41

Vue.js是最近比较流行的一个JavaScript的MVVM库,热门度可以和Jquery相比了,不过不同于Jquery的是Vue.js是以数据驱动和组件化的思想构建的。相比Angular.js框架,Vue.js提供了更加简洁、更容懂的api,能够使人快速的入门。

官方是这样介绍Vue.js的:Vue是是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用。

Vue示例:Hello World

我们入门每个编程语言,学习的第一个示例应时Hello World,Vue.js也不例外,也有关于Hello World的示例,我们来一起学习下吧,这段Vue.js代码将输出"Hello World“。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!--这是我们的View-->
  9.         <div id="app">
  10.             {{ message }}
  11.         </div>
  12.     </body>
  13.     <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  14.     <script>
  15.         // 这是我们的Model
  16.         var exampleData = {
  17.             message: 'Hello World!'
  18.         }
  19.         // 创建一个 Vue 实例或 "ViewModel"
  20.         // 它连接 View 与 Model
  21.         new Vue({
  22.             el: '#app',
  23.             data: exampleData
  24.         })
  25.     </script>
  26. </html>

我们使用Vue定义MVVM的步骤是:

  1. 定义一个View
  2. 定义Model
  3. 创建一个实例来连接VIew和Model

创建实例时,我们需要创建一个选项对象,这个对象可以用来表示数据民、方法等等。

el:#app表示的是Vue实例要挂载的ID元素

data:exampleDate表示我们Vue实例的数据

上面的{{message}}会被实例中的数据所替换。

Vue双向绑定示例

在Vue中,我们是使用v-model指令来创建双向数据绑定的。在input框里改变内容,p标签内的内容也会随着发生改变。

实践一下:用控制台试卷改变p标签内容,input上面的内容也会改变的。

  1. <!--这是我们的View-->
  2. <div id="app">
  3.     <p>{{ message }}</p>
  4.     <input type="text" v-model="message"/>
  5. </div>

Vue.js快速入门教程

Vue.js快速入门教程

Vue.js常用指令

上面说到的v-model只是vue中常用的其中一个指令,其实vue还有很多常用的指令,vue的指令一般是以v-开头的,用于和元素做绑定,为元素添加特殊的行为。

下面是一些常用的vue指令:

  1.  v-if指令
  2. v-show指令
  3. v-else指令
  4. v-for指令
  5. v-bind指令
  6. v-on指令

v-if指令

vue中的v-if是条件指令,它是根据这个表达式来添加或者删除元素的,基本语法如下:

v-if="expression"

expression是一个布尔值bool,可以是一个true或者false,也可以返回一个运算式。html中的4个变量都是来自vue实例中的属性。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <h1>Hello, Vue.js!</h1>
  10.             <h1 v-if="yes">Yes!</h1>
  11.             <h1 v-if="no">No!</h1>
  12.             <h1 v-if="age >= 25">Age: {{ age }}</h1>
  13.             <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
  14.         </div>
  15.     </body>
  16.     <script src="js/vue.js"></script>
  17.     <script>
  18.         var vm = new Vue({
  19.             el: '#app',
  20.             data: {
  21.                 yes: true,
  22.                 no: false,
  23.                 age: 28,
  24.                 name: 'keepfool'
  25.             }
  26.         })
  27.     </script>
  28. </html>

Vue.js快速入门教程

v-show指令

v-show也是一个条件指令,不过它是为元素设置样式的,设置css中的style。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <h1>Hello, Vue.js!</h1>
  10.             <h1 v-show="yes">Yes!</h1>
  11.             <h1 v-show="no">No!</h1>
  12.             <h1 v-show="age >= 25">Age: {{ age }}</h1>
  13.             <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
  14.         </div>
  15.     </body>
  16.     <script src="js/vue.js"></script>
  17.     <script>
  18.         var vm = new Vue({
  19.             el: '#app',
  20.             data: {
  21.                 yes: true,
  22.                 no: false,
  23.                 age: 28,
  24.                 name: 'keepfool'
  25.             }
  26.         })
  27.     </script>
  28. </html>

v-else指令

v-else指令很明显是第二种选择的条件指令,可以在本身有v-if或者v-show的元素中加入,而且必要前面要有v-if和v-show的元素,要紧跟。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <h1 v-if="age >= 25">Age: {{ age }}</h1>
  10.             <h1 v-else>Name: {{ name }}</h1>
  11.             <h1>---------------------分割线---------------------</h1>
  12.             <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
  13.             <h1 v-else>Sex: {{ sex }}</h1>
  14.         </div>
  15.     </body>
  16.     <script src="js/vue.js"></script>
  17.     <script>
  18.         var vm = new Vue({
  19.             el: '#app',
  20.             data: {
  21.                 age: 28,
  22.                 name: 'keepfool',
  23.                 sex: 'Male'
  24.             }
  25.         })
  26.     </script>
  27. </html>

v-for指令

v-for指令是一个循环指令,是基于一个数组渲染一个列表,和js的语法相类似。

我们在vue实例中的data属性中定义了一个people数组,然后用v-for遍历出people数组,依次在html中展示。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="styles/demo.css" />
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <table>
  11.                 <thead>
  12.                     <tr>
  13.                         <th>Name</th>
  14.                         <th>Age</th>
  15.                         <th>Sex</th>
  16.                     </tr>
  17.                 </thead>
  18.                 <tbody>
  19.                     <tr v-for="person in people">
  20.                         <td>{{ person.name  }}</td>
  21.                         <td>{{ person.age  }}</td>
  22.                         <td>{{ person.sex  }}</td>
  23.                     </tr>
  24.                 </tbody>
  25.             </table>
  26.         </div>
  27.     </body>
  28.     <script src="js/vue.js"></script>
  29.     <script>
  30.         var vm = new Vue({
  31.             el: '#app',
  32.             data: {
  33.                 people: [{
  34.                     name: 'Jack',
  35.                     age: 30,
  36.                     sex: 'Male'
  37.                 }, {
  38.                     name: 'Bill',
  39.                     age: 26,
  40.                     sex: 'Male'
  41.                 }, {
  42.                     name: 'Tracy',
  43.                     age: 22,
  44.                     sex: 'Female'
  45.                 }, {
  46.                     name: 'Chris',
  47.                     age: 36,
  48.                     sex: 'Male'
  49.                 }]
  50.             }
  51.         })
  52.     </script>
  53. </html>

v-bind指令

v-bind指令后面还有一个参数,以逗号隔开,例如v-bind:class。下面的这段代码实现了一个简单的分布功能,v-bind指令作用在当前的分布按钮上。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="styles/demo.css" />
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <ul class="pagination">
  11.                 <li v-for="n in pageCount">
  12.                     <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
  13.                 </li>
  14.             </ul>
  15.         </div>
  16.     </body>
  17.     <script src="js/vue.js"></script>
  18.     <script>
  19.         var vm = new Vue({
  20.             el: '#app',
  21.             data: {
  22.                 activeNumber: 1,
  23.                 pageCount: 10
  24.             }
  25.         })
  26.     </script>
  27. </html>
  28. 注意v-for="n in pageCount"这行代码,pageCount是一个整数,遍历时n从0开始,然后遍历到pageCount –1结束。

v-on指令

v-on指令是监听一个DOM事件,它和v-bind是类似的,都是绑定一个方法。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <p><input type="text" v-model="message"></p>
  10.             <p>
  11.                 <!--click事件直接绑定一个方法-->
  12.                 <button v-on:click="greet">Greet</button>
  13.             </p>
  14.             <p>
  15.                 <!--click事件使用内联语句-->
  16.                 <button v-on:click="say('Hi')">Hi</button>
  17.             </p>
  18.         </div>
  19.     </body>
  20.     <script src="js/vue.js"></script>
  21.     <script>
  22.         var vm = new Vue({
  23.             el: '#app',
  24.             data: {
  25.                 message: 'Hello, Vue.js!'
  26.             },
  27.             // 在 methods 对象中定义方法
  28.             methods: {
  29.                 greet: function() {
  30.                     // // 方法内 this 指向 vm
  31.                     alert(this.message)
  32.                 },
  33.                 say: function(msg) {
  34.                     alert(msg)
  35.                 }
  36.             }
  37.         })
  38.     </script>
  39. </html>

PS:v-bind和v-on也可以和Jquery那样写缩写,v-bind指令缩写是一个冒号,v-on指令缩写是一个@符号。

Vue小demo实例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="styles/demo.css" />
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <fieldset>
  11.                 <legend>
  12.                     Create New Person
  13.                 </legend>
  14.                 <div class="form-group">
  15.                     <label>Name:</label>
  16.                     <input type="text" v-model="newPerson.name"/>
  17.                 </div>
  18.                 <div class="form-group">
  19.                     <label>Age:</label>
  20.                     <input type="text" v-model="newPerson.age"/>
  21.                 </div>
  22.                 <div class="form-group">
  23.                     <label>Sex:</label>
  24.                     <select v-model="newPerson.sex">
  25.                     <option value="Male">Male</option>
  26.                     <option value="Female">Female</option>
  27.                 </select>
  28.                 </div>
  29.                 <div class="form-group">
  30.                     <label></label>
  31.                     <button @click="createPerson">Create</button>
  32.                 </div>
  33.         </fieldset>
  34.         <table>
  35.             <thead>
  36.                 <tr>
  37.                     <th>Name</th>
  38.                     <th>Age</th>
  39.                     <th>Sex</th>
  40.                     <th>Delete</th>
  41.                 </tr>
  42.             </thead>
  43.             <tbody>
  44.                 <tr v-for="person in people">
  45.                     <td>{{ person.name }}</td>
  46.                     <td>{{ person.age }}</td>
  47.                     <td>{{ person.sex }}</td>
  48.                     <td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
  49.                 </tr>
  50.             </tbody>
  51.         </table>
  52.         </div>
  53.     </body>
  54.     <script src="js/vue.js"></script>
  55.     <script>
  56.         var vm = new Vue({
  57.             el: '#app',
  58.             data: {
  59.                 newPerson: {
  60.                     name: '',
  61.                     age: 0,
  62.                     sex: 'Male'
  63.                 },
  64.                 people: [{
  65.                     name: 'Jack',
  66.                     age: 30,
  67.                     sex: 'Male'
  68.                 }, {
  69.                     name: 'Bill',
  70.                     age: 26,
  71.                     sex: 'Male'
  72.                 }, {
  73.                     name: 'Tracy',
  74.                     age: 22,
  75.                     sex: 'Female'
  76.                 }, {
  77.                     name: 'Chris',
  78.                     age: 36,
  79.                     sex: 'Male'
  80.                 }]
  81.             },
  82.             methods:{
  83.                 createPerson: function(){
  84.                     this.people.push(this.newPerson);
  85.                     // 添加完newPerson对象后,重置newPerson对象
  86.                     this.newPerson = {name: '', age: 0, sex: 'Male'}
  87.                 },
  88.                 deletePerson: function(index){
  89.                     // 删一个数组元素
  90.                     this.people.splice(index,1);
  91.                 }
  92.             }
  93.         })
  94.     </script>
  95. </html>

Vue.js快速入门教程

这个实例是基于vue.js的一个人员统计的小demo,有兴趣可以预览下这个demo,也可以直接保存下来研究一下。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: