Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,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标签又被称作挂载点;{{}}被称作插值表达式。
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>
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>
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>
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>
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>
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>
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>
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>
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<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>
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