Vue 实例
Vue.js 实例 ¶
本章节为大家介绍几个 Vue.js 实例，通过实例练习来巩固学到的知识点。
导航菜单实例 ¶
html
1<div id="main">
2
3 <!-- 激活的菜单样式为 active 类 -->
4 <!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->
5
6 <nav v-bind:class="active" v-on:click.prevent>
7
8 <!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->
9
10 <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
11 <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
12 <a href="#" class="services" v-on:click="makeActive('services')">Services</a>
13 <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
14 </nav>
15
16 <!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
17
18 <p>您选择了 <b>{{active}} 菜单</b></p>
19</div>
20
21<script>
22// 创建一个新的 Vue 实例
23var demo = new Vue({
24 // DOM 元素，挂载视图模型
25 el: '#main',
26
27 // 定义属性，并设置初始值
28 data: {
29 active: 'home'
30 },
31
32 // 点击菜单使用的函数
33 methods: {
34 makeActive: function(item){
35 // 模型改变，视图会自动更新
36 this.active = item;
37 }
38 }
39});
40</script>编辑文本实例 ¶
html
1<!-- v-cloak 隐藏未编译的变量，直到 Vue 实例准备就绪。 -->
2<!-- 元素点击后 hideTooltp() 方法被调用 -->
3
4<div id="main" v-cloak v-on:click="hideTooltip">
5
6 <!-- 这是一个提示框
7 v-on:click.stop 是一个点击事件处理器，stop 修饰符用于阻止事件传递
8 v-if 用来判断 show_tooltip 为 true 时才显示 -->
9
10 <div class="tooltip" v-on:click.stop v-if="show_tooltip">
11
12 <!-- v-model 绑定了文本域的内容
13 在文本域内容改变时，对应的变量也会实时改变 -->
14
15 <input type="text" v-model="text_content" />
16 </div>
17
18 <!-- 点击后调用 "toggleTooltip" 方法并阻止事件传递 -->
19
20 <!-- "text_content" 变量根据文本域内容的变化而变化 -->
21
22 <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
23
24</div>
25
26<script>
27var demo = new Vue({
28 el: '#main',
29 data: {
30 show_tooltip: false,
31 text_content: '点我，并编辑内容。'
32 },
33 methods: {
34 hideTooltip: function(){
35 // 在模型改变时，视图也会自动更新
36 this.show_tooltip = false;
37 },
38 toggleTooltip: function(){
39 this.show_tooltip = !this.show_tooltip;
40 }
41 }
42})
43</script>订单列表实例 ¶
html
1<form id="main" v-cloak>
2
3 <h1>Services</h1>
4
5 <ul>
6
7 <!-- 循环输出 services 数组, 设置选项点击后的样式 -->
8
9 <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
10
11 <!-- 显示订单中的服务名，价格
12 Vue.js 定义了货币过滤器，用于格式化价格 -->
13
14 {{service.name}} <span>{{service.price | currency}}</span>
15
16 </li>
17 </ul>
18
19 <div class="total">
20
21 <!-- 计算所有服务的价格，并格式化货币 -->
22
23 Total: <span>{{total() | currency}}</span>
24
25 </div>
26
27</form>
28<script>
29
30// 自定义过滤器 "currency".
31Vue.filter('currency', function (value) {
32 return '$' + value.toFixed(2);
33});
34
35var demo = new Vue({
36 el: '#main',
37 data: {
38 // 定义模型属性 the model properties. The view will loop
39 // 视图将循环输出数组的数据
40 services: [
41 {
42 name: 'Web Development',
43 price: 300,
44 active:true
45 },{
46 name: 'Design',
47 price: 400,
48 active:false
49 },{
50 name: 'Integration',
51 price: 250,
52 active:false
53 },{
54 name: 'Training',
55 price: 220,
56 active:false
57 }
58 ]
59 },
60 methods: {
61 toggleActive: function(s){
62 s.active = !s.active;
63 },
64 total: function(){
65
66 var total = 0;
67
68 this.services.forEach(function(s){
69 if (s.active){
70 total+= s.price;
71 }
72 });
73
74 return total;
75 }
76 }
77});
78
79</script>搜索页面实例 ¶
html
1<form id="main" v-cloak>
2
3 <div class="bar">
4 <!-- searchString 模型与文本域创建绑定 -->
5
6 <input type="text" v-model="searchString" placeholder="输入搜索内容" />
7 </div>
8
9 <ul>
10 <!-- 循环输出数据 -->
11
12 <li v-for="article in filteredArticles">
13 <a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
14 <p>{{article.title}}</p>
15 </li>
16 </ul>
17
18</form>
19<script>
20
21var demo = new Vue({
22 el: '#main',
23 data: {
24 searchString: "",
25
26 // 数据模型，实际环境你可以根据 Ajax 来获取
27
28 articles: [
29 {
30 "title": "What You Need To Know About CSS Variables",
31 "url": "https://www.runoob.com/css/css-tutorial.html",
32 "image": "https://static.runoob.com/images/icon/css.png"
33 },
34 {
35 "title": "Freebie: 4 Great Looking Pricing Tables",
36 "url": "https://www.runoob.com/html/html-tutorial.html",
37 "image": "https://static.runoob.com/images/icon/html.png"
38 },
39 {
40 "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
41 "url": "https://www.runoob.com/css3/css3-tutorial.html",
42 "image": "https://static.runoob.com/images/icon/css3.png"
43 },
44 {
45 "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
46 "url": "https://www.runoob.com/css3/css3-tutorial.html",
47 "image": "https://static.runoob.com/images/icon/css3.png"
48 },
49 {
50 "title": "Learn SQL In 20 Minutes",
51 "url": "https://www.runoob.com/sql/sql-tutorial.html",
52 "image": "https://static.runoob.com/images/icon/sql.png"
53 },
54 {
55 "title": "Creating Your First Desktop App With HTML, JS and Electron",
56 "url": "https://www.runoob.com/js/js-tutorial.html",
57 "image": "https://static.runoob.com/images/icon/html.png"
58 }
59 ]
60 },
61 computed: {
62 // 计算数学，匹配搜索
63 filteredArticles: function () {
64 var articles_array = this.articles,
65 searchString = this.searchString;
66
67 if(!searchString){
68 return articles_array;
69 }
70
71 searchString = searchString.trim().toLowerCase();
72
73 articles_array = articles_array.filter(function(item){
74 if(item.title.toLowerCase().indexOf(searchString) !== -1){
75 return item;
76 }
77 })
78
79 // 返回过来后的数组
80 return articles_array;;
81 }
82 }
83});
84</script>切换不同布局实例 ¶
html
1<form id="main" v-cloak>
2
3 <div class="bar">
4
5 <!-- 两个按钮用于切换不同的列表布局 -->
6
7 <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
8 <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
9 </div>
10
11 <!-- 我们设置了两套布局页面。使用哪套依赖于 "layout" 绑定 -->
12
13 <ul v-if="layout == 'grid'" class="grid">
14 <!-- 使用大图，没有文本 -->
15 <li v-for="a in articles">
16 <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
17 </li>
18 </ul>
19
20 <ul v-if="layout == 'list'" class="list">
21 <!-- 使用小图及标题 -->
22 <li v-for="a in articles">
23 <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
24 <p>{{a.title}}</p>
25 </li>
26 </ul>
27
28</form>
29<script>
30
31 var demo = new Vue({
32 el: '#main',
33 data: {
34 // 视图模型，可能的值是 "grid" 或 "list"。
35 layout: 'grid',
36
37 articles: [{
38 "title": "HTML 教程",
39 "url": "https://www.runoob.com/html/html-tutorial.html",
40 "image": {
41 "large": "https://static.runoob.com/images/mix/htmlbig.png",
42 "small": "https://static.runoob.com/images/icon/html.png"
43 }
44 },
45 {
46 "title": "CSS 教程",
47 "url": "https://www.runoob.com/css/css-tutorial.html",
48 "image": {
49 "large": "https://static.runoob.com/images/mix/cssbig.png",
50 "small": "https://static.runoob.com/images/icon/css.png"
51 }
52 },
53 {
54 "title": "JS 教程",
55 "url": "https://www.runoob.com/js/js-tutorial.html",
56 "image": {
57 "large": "https://static.runoob.com/images/mix/jsbig.jpeg",
58 "small": "https://static.runoob.com/images/icon/js.png"
59 }
60 },
61 {
62 "title": "SQL 教程",
63 "url": "https://www.runoob.com/sql/sql-tutorial.html",
64 "image": {
65 "large": "https://static.runoob.com/images/mix/sqlbig.png",
66 "small": "https://static.runoob.com/images/icon/sql.png"
67 }
68 },
69 {
70 "title": "Ajax 教程",
71 "url": "https://www.runoob.com/ajax/ajax-tutorial.html",
72 "image": {
73 "large": "https://static.runoob.com/images/mix/ajaxbig.png",
74 "small": "https://static.runoob.com/images/icon/ajax.png"
75 }
76 },
77 {
78 "title": "Python 教程",
79 "url": "https://www.runoob.com/pyhton/pyhton-tutorial.html",
80 "image": {
81 "large": "https://static.runoob.com/images/mix/pythonbig.png",
82 "small": "https://static.runoob.com/images/icon/python.png"
83 }
84 }]
85
86 }
87 });
88
89</script>