vue入门案例
1、技术在迭代，有时候你为了生活没有办法，必须掌握一些新的技术，可能你不会或者没有时间造轮子，那么就先把利用轮子吧。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11
12 <div id="app">{{message}}</div>
13
14 <script type="text/javascript">
15 //创建一个Vue的实例，让这个实例去接管id为app的这个元素
16 var vue = new Vue({
17 el:"#app", //el关键字是element单词的缩写，代表元素。#app是id为app。el的值等于#app代表和那个dom节点的id做绑定。
18 data:{ //data关键字是存放的需求数据。去处理id等于app这一块区域的内容。
19 message:"hello vue!" //message名称可以根据自己需求起名称。
20 }
21 });
22 </script>
23 </body>
24 </html>
2、挂载点，模板，实例之前的关系：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11
12 <!-- 挂载点，模板，实例之前的关系 -->
13
14 <!-- 此div标签被称为vue1实例的挂载点。vue1会处理该挂载点下面的内容。 -->
15 <!-- 挂载点内部的内容被称为模板，模板内容也可以写到template标签里面，切记template值需要使用html元素包含起来。 -->
16 <div id="app"></div>
17
18 <!-- 此div标签被称为vue2实例的挂载点 -->
19 <div id="app2">{{message}}</div>
20
21 <script type="text/javascript">
22 //创建一个Vue的实例，让这个实例去接管id为app的这个元素
23 //实例vue1，创建了一个Vue实例。
24 var vue1 = new Vue({
25 el: "#app", //el关键字是element单词的缩写，代表元素。#app是id为app。el的值等于#app代表和那个dom节点的id做绑定。
26 template: '<h1>I am biehl,{{message}}</h1>', //template标签的值被称为模板内容。
27 data:{ //data关键字是存放的需求数据。去处理id等于app这一块区域的内容。
28 message:"hello vue!" //message名称可以根据自己需求起名称。
29 }
30 });
31
32 var vue2 = new Vue({
33 el:"#app2",
34 data:{
35 message:"你好，vue框架"
36 }
37
38 });
39 </script>
40 </body>
41 </html>3、Vue中方法的使用以及属性的改变，Vue实例中的数据，事件，方法。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11
12 <!-- 挂载点，模板，实例之前的关系 -->
13
14 <!-- 此div标签被称为vue1实例的挂载点。vue1会处理该挂载点下面的内容。 -->
15 <!-- 挂载点内部的内容被称为模板，模板内容也可以写到template标签里面，切记template值需要使用html元素包含起来。 -->
16 <div id="app"></div>
17
18 <!-- 此div标签被称为vue2实例的挂载点 -->
19 <div id="app2">{{message}}</div>
20
21 <!-- {{number}}、{{msg}}被称为插值表达式 -->
22 <!-- <div id="app3">{{number}},{{msg}}</div> -->
23
24 <!-- v-text是vue的一个属性指令，值是一个变量，代表了h4要显示的变量就是number的值，等同于v-html属性命令，此命令将html进行转义，v-text不转义。 -->
25 <div id="app3">
26 <!-- <h4 v-text="number"></h4> -->
27 <div v-on:click="()=>{alert('world vue!!!')}">{{msg}}</div>
28 <div v-on:click="handleClick">{{msg}}</div>
29 <!-- v-on:的简写是@这个符号 -->
30 <div @click="handleClick2">{{msg}}</div>
31 </div>
32
33
34 <script type="text/javascript">
35 //创建一个Vue的实例，让这个实例去接管id为app的这个元素
36 //实例vue1，创建了一个Vue实例。
37 var vue1 = new Vue({
38 el: "#app", //el关键字是element单词的缩写，代表元素。#app是id为app。el的值等于#app代表和那个dom节点的id做绑定。
39 template: '<span>I am biehl,{{message}}</span>', //template标签的值被称为模板内容。
40 data:{ //data关键字是存放的需求数据。去处理id等于app这一块区域的内容。
41 message:"hello vue!" //message名称可以根据自己需求起名称。
42 }
43 });
44
45 var vue2 = new Vue({
46 el:"#app2",
47 data:{
48 message:"你好，vue框架"
49 }
50 });
51
52 var vue3 = new Vue({
53 el:"#app3",
54 data:{
55 number:123, //vue中改变数据的显示，设法改变数据即可，即可完成数据的改变。
56 msg:"hello vue!"
57 },
58 methods:{
59 handleClick:function(){
60 console.log("world vue!!!!!!!!");
61 alert("world vue!!!!!!!!");
62 this.msg = "world vue!!!"; //在vue的methods中改变data里面的数据，如此调用即可完成数据的改变
63 },
64 handleClick2:function(){
65 this.msg = "hello vue!!!";
66 },
67 }
68 });
69 </script>
70 </body>
71 </html>4、vue中属性绑定和双向数据绑定。1）、v-bind:等同于:。2）、v-on:等同于@。3）、双向绑定v-model。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11 <!-- vue中属性绑定和双向数据绑定。1、v-bind:等同于:。2、v-on:等同于@。 -->
12 <div id="app1">
13 <div v-bind:title="title">{{msg}}</div>
14 <div :title="'I am biehl , ' + title">{{msg}}</div>
15 <!-- v-bind:value等价于:value。 -->
16 <input type="text" name="userName" v-bind:value="content">
17 <div>{{content}}</div>
18 <!-- 双向绑定v-model,指定data的password的值 -->
19 <input type="password" name="password" v-model="password">
20 <div>{{password}}</div>
21
22 </div>
23
24
25 <script type="text/javascript">
26 var vue1 = new Vue({
27 el:"#app1", //el的值是id，所以一定记得加上#，例如#app1
28 data:{
29 msg:"hello vue!",
30 title:"this is hello vue!!!",
31 content:"this is content!!!",
32 password:"123456",
33 }
34 });
35
36 </script>
37 </body>
38 </html> 5、Vue中计算属性和侦听器。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11 <!-- vue中属性绑定和双向数据绑定。1、v-bind:等同于:。2、v-on:等同于@。 -->
12 <div id="app1">
13 <div v-bind:title="title">{{msg}}</div>
14 <div :title="'I am biehl , ' + title">{{msg}}</div>
15 <!-- v-bind:value等价于:value。 -->
16 <input type="text" name="userName" v-bind:value="content">
17 <div>{{content}}</div>
18 <!-- 双向绑定v-model,指定data的password的值 -->
19 <input type="password" name="password" v-model="password">
20 <div>{{password}}</div>
21 </div>
22
23 <br/><br/>
24
25 <!-- Vue中计算属性和侦听器 -->
26 <div id="app2">
27 姓：<input type="text" name="firstName" v-model="firstName" /><br/>
28 名：<input type="text" name="lastName" v-model="lastName" /> <br/>
29 <!-- 冗余的显示 -->
30 姓名：<span>{{firstName}}{{lastName}}</span> <br/>
31 姓名：<span>{{fullName}}</span><br/>
32
33 <div>{{count}}</div>
34 <div v-text="count"></div>
35 <div v-html="count"></div>
36
37 <!-- 监听器的使用 -->
38
39
40 </div>
41
42
43 <script type="text/javascript">
44 var vue1 = new Vue({
45 el:"#app1", //el的值是id，所以一定记得加上#，例如#app1
46 data:{
47 msg:"hello vue!",
48 title:"this is hello vue!!!",
49 content:"this is content!!!",
50 password:"123456",
51 }
52 });
53
54
55 /* Vue中计算属性和侦听器 */
56 var vue2 = new Vue({
57 el:"#app2",
58 data:{
59 firstName:"张",
60 lastName:"三三",
61 count:0,
62 },
63 //vue计算属性computed
64 computed:{
65 fullName:function(){
66 return this.firstName + ' ' + this.lastName;
67 },
68 },
69 //监听器,监听某一个数据的变化，当某一个数据变化，就执行自己的逻辑。
70 watch:{
71 /*firstName:function(){
72 this.count++;
73 },
74 lastName:function(){
75 this.count++;
76 },*/
77 fullName:function(){
78 this.count++;
79 //alert("什么鬼......");
80 }
81 }
82 });
83 </script>
84 </body>
85 </html> 6、Vue中的v-if、v-for、v-show命令。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11 <!-- Vue中的v-if、v-for、v-show命令 -->
12 <div id="app1">
13 <!-- v-if会让div标签消失 -->
14 <div v-if="show">{{msg}}</div>
15 <button type="button" @click="handleClick">toggle</button>
16
17 <br/><br/>
18
19 <!-- v-show标签是将div的样式display属性设置为none的，style="display: none;" -->
20 <div v-show="show">{{msg}}</div>
21 <button type="button" @click="handleClick2">toggle</button>
22
23 <!-- v-for标签进行循环操作 -->
24 <ul>
25 <!-- 将list的值放到item里面，然后将item展示出来。:key加强渲染，但是循环值必须不同。 -->
26 <li v-for="(item,index) of list" :key="item">{{item}}</li>
27 </ul>
28 </div>
29
30
31
32 <script type="text/javascript">
33 var vue1 = new Vue({
34 el:"#app1",
35 data:{
36 msg:"您好，vue!",
37 show:true,
38 list:[11,22,33,44,55,66]
39 },
40 methods:{
41 handleClick:function(){
42 // this.show = !this.show，表示取show得反。这种思路很巧妙。
43 this.show = !this.show
44 },
45 handleClick2:function(){
46 // this.show = !this.show，表示取show得反。这种思路很巧妙。
47 this.show = !this.show
48 }
49 }
50 });
51
52 </script>
53 </body>
54 </html> 7、Vue的全局组件、局部组件。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vue入门</title>
6 <!-- 引入vue.min.js文件，直接引用这个文件就行了，不用引用jquery.js文件的 -->
7 <script type="text/javascript" src="./vue.min.js"></script>
8 </head>
9 <body>
10
11 <div id="app1">
12 <div>
13 <!-- v-model数据交互 -->
14 <input type="text" name="userName" v-model="inputValue"/>
15 <!-- 点击事件 -->
16 <button @click="handleClick">提交</button>
17 <!-- <ul>
18 循环遍历输出结果
19 <li v-for="(item,index) of list" :key="index">{{item}}</li>
20 </ul> -->
21
22 <!-- 全局组件 -->
23 <!-- <ul>
24 <todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item>
25 </ul> -->
26
27 <!-- 局部组件 -->
28 <ul>
29 <todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item>
30 </ul>
31
32 </div>
33 </div>
34
35
36 <script type="text/javascript">
37 // 组件的拆分。全局组建
38 /*Vue.component('todo-item',{
39 props:['content'],
40 template:'<li>{{content}}</li>'
41 });*/
42
43 // 局部组件
44 var toDoItem = {
45 props:['content'],
46 template:'<li>{{content}}</li>'
47 };
48
49 // vue实例
50 var vue1 = new Vue({
51 el:"#app1",
52 //局部组件
53 components:{
54 'todo-item':toDoItem
55 },
56 data:{
57 msg:"hello vue!",
58 inputValue:'',
59 list:[],
60 },
61 methods:{
62 handleClick:function(){
63 // vue的思路围绕着数据进行操作的，之前都是操作的dom.
64 // 判断是否不为空且不为空字符串。
65 if(this.inputValue != null && this.inputValue != ''){
66 // 将输入框里面的值加到数组里面，展示在下面的列表里面
67 this.list.push(this.inputValue),
68 // 将输入框里面的值设置为空
69 this.inputValue = ''
70 }
71 }
72 }
73 });
74
75 </script>
76 </body> 本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-06-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读