随笔 - 597  文章 - 4  评论 - 445  阅读 - 424万

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>
复制代码

 

posted on   别先生  阅读(4013)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 别先生
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
AI IDE Trae