Android开发人员不得不学习的Vue.js基础

介绍

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

用法

1、Vue实例

 1<body>
 2  <div id="root">{{msg}}</div>
 3
 4  <script>
 5    new Vue({
 6      el: "#root",
 7      data: {
 8        msg: "hello world"
 9      },
10      methods{
11
12      }
13    })
14  </script>
15</body>

上述代码中,在script标签中实例化了一个Vue对象,该Vue对象和id为root的div标签绑定了,所以可以通过Vue来操作这个div标签。data中存放的数据可供div调用,这样可以动态的修改div中的数据;methods中用于存放各种方法,供标签调用。div标签又被称作挂载点;{{}}被称作插值表达式。

2、Vue中的数据、事件和方法

  • v-text:用于操作纯文本,它会替代显示对应的数据对象上的值,它可以用{{}}来简写。
 1<body>
 2  <div id="root">
 3       <h1 v-text="number"></h1>
 4  </div>
 5
 6  <script>
 7    new Vue({
 8      el: "#root",
 9      data: {
10        msg: "hello world",
11        number: "123"
12      }
13    })
14  </script>
15</body>
  • v-html:用于输出html,它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
 1<body>
 2  <div id="root">
 3       <h1 v-text="number"></h1>
 4       <h1 v-html="content"></h1>
 5  </div>
 6
 7  <script>
 8    new Vue({
 9      el: "#root",
10      data: {
11        msg: "hello world",
12        number: "123",
13        content: "<h1>hello world</h1>"
14      }
15    })
16  </script>
17</body>
  • v-on:事件名称:用来绑定一个事件监听器,通过它调用我们Vue实例中定义的方法。v-on:可以简写成@符号。
 1<body>
 2
 3  <div id="root">
 4    <div @click="handleClick">{{content}}</div>
 5  </div>
 6
 7  <script>
 8    new Vue({
 9      el: "#root",
10      data: {
11        content: "hello"
12      },
13      methods: {
14        handleClick: function() {
15          this.content = "world"
16        }
17      }
18    })
19  </script>
20</body>

3、属性绑定和双向数据绑定

  • v-bind:属性名称:它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。v-bind:可以简写成:符号。
 1<body>
 2
 3  <div id="root">
 4    <div v-bind:title="title">{{content}}</div>
 5  </div>
 6
 7  <script>
 8    new Vue({
 9      el: "#root",
10      data: {
11        content: "hello world",
12        title:"I'm hello world"
13      }
14    })
15  </script>
16</body>
  • v-model:该指令绑定的元素就是组件的输出结果。一般用于表单组件,当输入框中的内容改变时,文本也跟着改变。
 1<body>
 2
 3  <div id="root">
 4    <div v-bind:title="title">{{content}}</div>
 5    <input v-model="vcontent" />
 6    <div>{{vcontent}}</div>
 7  </div>
 8
 9  <script>
10    new Vue({
11      el: "#root",
12      data: {
13        content: "hello world",
14        title:"I'm hello world",
15        vcontent:"I'm v-model"
16      }
17    })
18  </script>
19</body>

4、计算属性和侦听器

  • computed:比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。如果监测的值没有发生改变的话,那么会再次使用这个结果值时不会去再次计算,而是使用上次的缓存值。
 1<body>
 2
 3  <div id="root">
 4    <div v-bind:title="title">{{content}}</div>
 5    <input v-model="vcontent" />
 6    <div>{{vcontent}}</div>
 7    姓:<input v-model="firstName" /> 名:<input v-model="lastName" />
 8    <div>{{fullName}}</div>
 9  </div>
10
11  <script>
12    new Vue({
13      el: "#root",
14      data: {
15        content: "hello world",
16        title: "I'm hello world",
17        vcontent: "I'm v-model",
18        firstName: '',
19        lastName: ''
20      },
21      computed :{
22        fullName: function() {
23          return this.firstName + ' ' + this.lastName
24        }
25      }
26    })
27  </script>
28</body>
  • watch:侦听器指的是去监听某一个数据(data里面)或者计算属性(computed里面)的变化,一旦数据发生了变化,就能回调。
 1<body>
 2
 3  <div id="root">
 4    <div v-bind:title="title">{{content}}</div>
 5    <input v-model="vcontent" />
 6    <div>{{vcontent}}</div>
 7    姓:<input v-model="firstName" /> 名:<input v-model="lastName" />
 8    <div>{{fullName}}</div>
 9    <div>{{count}}</div>
10  </div>
11
12  <script>
13    new Vue({
14      el: "#root",
15      data: {
16        content: "hello world",
17        title: "I'm hello world",
18        vcontent: "I'm v-model",
19        firstName: '',
20        lastName: '',
21        count: 0
22      },
23      computed: {
24        fullName: function() {
25          return this.firstName + ' ' + this.lastName;
26        }
27      },
28      watch: {
29        fullName: function() {
30          this.count++;
31        }
32      }
33    })
34  </script>
35</body>

5、三个常见指令

  • v-if:控制元素是否存在(显示)的,直接把元素从DOM树中移除或者添加到DOM树中,性能略差。
  • v-show:控制元素是否显示的,通过改变display属性来控制元素是否显示,性能略好。
 1<body>
 2
 3  <div id="root">
 4    <div v-bind:title="title">{{content}}</div>
 5    <input v-model="vcontent" />
 6    <div>{{vcontent}}</div>
 7    姓:<input v-model="firstName" /> 名:<input v-model="lastName" />
 8    <div>{{fullName}}</div>
 9    <div v-if="show">{{count}}</div>
10    <button @click="handleClick">toggon</button>
11  </div>
12
13  <script>
14    new Vue({
15      el: "#root",
16      data: {
17        content: "hello world",
18        title: "I'm hello world",
19        vcontent: "I'm v-model",
20        firstName: '',
21        lastName: '',
22        count: 0,
23        show:true
24      },
25      methods: {
26        handleClick: function() {
27          this.show=!this.show;
28        }
29      },
30      computed: {
31        fullName: function() {
32          return this.firstName + ' ' + this.lastName;
33        }
34      },
35      watch: {
36        fullName: function() {
37          this.count++;
38        }
39      }
40    })
41  </script>
42</body>
  • v-for:指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
 1<body>
 2
 3  <div id="root">
 4    <div v-bind:title="title">{{content}}</div>
 5    <input v-model="vcontent" />
 6    <div>{{vcontent}}</div>
 7    姓:<input v-model="firstName" /> 名:<input v-model="lastName" />
 8    <div>{{fullName}}</div>
 9    <div v-if="show">{{count}}</div>
10    <button @click="handleClick">toggon</button>
11    <ul>
12      <li v-for="(item, index) of list" :key="index">
13        {{item}}
14      </li>
15    </ul>
16  </div>
17
18  <script>
19    new Vue({
20      el: "#root",
21      data: {
22        content: "hello world",
23        title: "I'm hello world",
24        vcontent: "I'm v-model",
25        firstName: '',
26        lastName: '',
27        count: 0,
28        show:true,
29        list:[1,2,3]
30      },
31      methods: {
32        handleClick: function() {
33          this.show=!this.show;
34        }
35      },
36      computed: {
37        fullName: function() {
38          return this.firstName + ' ' + this.lastName;
39        }
40      },
41      watch: {
42        fullName: function() {
43          this.count++;
44        }
45      }
46    })
47  </script>
48</body>

组件的使用

组件是可复用的Vue实例,且带有一个名字,在Vue中分为全局组件和局部组件,局部组件需要在Vue对象中注册才能被使用。

1、全局组件的定义

 1<body>
 2    <todo-item></todo-item>
 3</body>
 4
 5<script>
 6    Vue.component('todo-item',{
 7        template: '<li>item</li>'
 8    })
 9
10    new Vue({
11
12    })
13</script>

2、局部组件的定义

 1<body>
 2    <todo-item></todo-item>
 3</body>
 4
 5<script>
 6    var TodoItem={
 7        template='<li>item</li>';
 8    }
 9
10    new Vue({
11        //注册局部组件,然后才能在外部使用
12        components:{
13            'todo-item':TodoItem
14        }
15    })
16</scr

原文发布于微信公众号 - IT先森养成记(cyg_24kshign)

原文发表时间:2018-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏liulun

riot.js教程【六】循环、HTML元素标签

前文回顾 riot.js教程【五】标签嵌套、命名元素、事件、标签条件 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】...

2668
来自专栏HTML5学堂

querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自...

3627
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(四)节点

页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。

1314
来自专栏WebDeveloper

使用css3属性处理单词的换行和断词

1393
来自专栏Ryan Miao

java变量的加载顺序

学习编程思想 1 package com.test.java.classs; 2 3 /** 4 * Created by Administrato...

2519
来自专栏WindCoder

从li看html标签属性(attribute)和dom元素的属性(property)

从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。

3721
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1859
来自专栏柠檬先生

jquery事件绑定

.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventOb...

2077
来自专栏柠檬先生

jquery的基本选择器

关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所...

2049
来自专栏王磊的博客

jquery的扩展方法介绍

  最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种...

38011

扫码关注云+社区

领取腾讯云代金券