下方有HTML源码示例
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})文本插值，我们还可以像这样来绑定元素 attribute
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})条件与循环
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})处理用户输入
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})组件化应用构建
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})下方有完整的练习代码,一个HTML页面
1 <html>
2 <head>
3 <title>Hello World</title>
4
5 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7 </head>
8
9 <body>
10
11 <p>
12 <h3>练习1</h1>
13 <div id="app">
14 {{ message }}
15 </div>
16 </p>
17
18 <hr/>
19
20 <p>
21 <h3>练习2</h1>
22 <div id="app-2">
23 <span v-bind:title="message">
24 鼠标悬停几秒钟查看此处动态绑定的提示信息！
25 <br>
26 打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息' 再次悬停
27 </span>
28 </div>
29 </p>
30
31 <hr/>
32
33 <p>
34 <h3>练习3</h1>
35 <div id="app-3">
36 <p v-if="seen">现在你看到我了</p>
37 继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
38 </div>
39 </p>
40
41 <hr/>
42
43 <p>
44 <h3>练习4</h1>
45 <div id="app-4">
46 <ol>
47 <li v-for="todo in todos">
48 {{ todo.text }}
49 </li>
50 </ol>
51 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目
52 </div>
53 </p>
54
55 <hr/>
56
57 <p>
58 <h3>练习5</h1>
59 <div id="app-5">
60 <p>{{ msg }}</p>
61 <button v-on:click="reverseMessage">反转消息</button>
62 </div>
63 </p>
64
65 <hr/>
66
67 <p>
68 <h3>练习6</h1>
69 <div id="app-6">
70 <p>{{ msg }}</p>
71 <input v-model="msg">
72 </div>
73 </p>
74
75 <hr/>
76
77 <p>
78 <h3>练习7</h1>
79 <div id="app-7">
80 <ol>
81 <!-- 创建一个 todo-item 组件的实例 -->
82
83 <!--
84 现在我们为每个 todo-item 提供todo对象
85 todo 对象是变量，即其内容可以是动态的
86 我们也需要为每个组件提供一个 "key" ，稍后再作详细解释
87 -->
88 <todo-item
89 v-for="item in groceryList"
90 v-bind:todo="item"
91 v-bind:key="item.id"
92 ></todo-item>
93 </ol>
94 </div>
95 </p>
96
97 <hr/>
98
99 <p>
100 <h3>练习8</h1>
101 <span> (假想的) 例子</span>
102 <div id="app">
103 <app-nav></app-nav>
104 <app-view>
105 <app-sidebar></app-sidebar>
106 <app-content></app-content>
107 </app-view>
108 </div>
109 </p>
110
111
112
113
114 <script>
115
116 var app = new Vue({
117 el : "#app",
118 data:{
119 message: "hello world"
120 }
121 })
122
123 var app2 = new Vue({
124 el: "#app-2",
125 data: {
126 message: "页面加载于" + new Date().toLocaleString()
127 }
128 })
129
130 var app3 = new Vue({
131 el: '#app-3',
132 data:{
133 seen: true
134 }
135 })
136
137 var app4 = new Vue({
138 el: '#app-4',
139 data: {
140 todos:[
141 { text: "学习 Java"},
142 { text: "学习 Vue"},
143 { text: "测试项目"},
144 ]
145 }
146 })
147
148 var app5 = new Vue({
149 el: '#app-5',
150 data:{
151 msg: "hello Vue"
152 },
153 methods:{
154 reverseMessage: function(){
155 this.msg = this.msg.split('').reverse().join('')
156 }
157 }
158 })
159
160 var app6 = new Vue({
161 el: '#app-6',
162 data: {
163 msg: "hello zcy"
164 }
165 })
166
167 Vue.component('todo-item',{
168 // todo-item 组件现在接受一个
169 // "prop"，类似于一个自定义 attribute
170 // 这个 prop 名为 todo
171 props: ['todo'],
172 // template: '<li>这是个代办项</li>'
173 template: '<li> {{ todo.text }} </li>'
174 })
175
176 var app7 = new Vue({
177 el: '#app-7',
178 data:{
179 groceryList: [
180 { id:0, text: '蔬菜'},
181 { id:1, text: '奶酪'},
182 { id:2, text: '肉肉'}
183 ]
184 }
185 })
186
187 </script>
188
189 </body>
190
191 </html>View Code
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
