Vue.js 学习

一，Vue.js 介绍

Vue 是一套用于构建用户界面的渐进式javascript框架，与其它大型框架不同的是：Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，另外一个方面,当Vue与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动
Vue.js是用于构建交互式的Web界面的库，它提供MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层(viewModel)，并通过双向数据绑定连接视图（view）和模型（model）。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架，Vue.js更容易上手，它让你通过简单而灵活的API创建由数据驱动的UI组件
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

二，导包和IDEA设置

导入相关jar包

IDEA设置

三，Vue 练习

1，Vue01 --- 插值表达式

1-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue01-插值表达式</title>
 6     <!--当网速较慢，Vue初始化未完成时，插值表达式不能被解析，会直接显示出来，
 7     加载完毕之后又会被替换成真实结果，造成闪烁，加上[v-cloak]会隐藏未加载完毕的插值表达式-->
 8     <style>
 9         [v-cloak] {
10             display: none;
11         }
12     </style>
13 </head>
14 <body>
15 <h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1>
16 <div id="vue">
17     <p v-cloak>{{msg1}}</p>
18     <p v-text="msg2"></p>
19     <p>{{msg3}}</p>
20     <p v-html="msg3"></p>
21 </div>
22 
23 <script src="../lib/vue.js"></script>
24 <script>
25     var vm = new Vue({
26         el: "#vue",
27         data: {
28             msg1: "hello,vue1",
29             msg2: "hello,vue2",
30             msg3:"<p style='color:red'>我是一个p标签</p>"
31         }
32     })
33 </script>
34 </body>
35 </html>

1-2.运行结果

2，Vue02 --- bind+on指令

2-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue02-bind+on指令</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 <h1>v-bind、v-on指令的学习</h1>
10 <div id="vue">
11     <!-- v-bind:可以简写为: -->
12     <label>用户名：<input type="text" name="username" v-bind:value="msg"/></label>
13     <hr>
14     <label>用户名：<input type="text" name="username" :value="msg"/></label>
15     <hr>
16     <label>用户名：<input type="text" name="username" :value="'你好：'+msg"/></label>
17     <hr>
18     <!-- v-on:等价于@ -->
19     <button v-on:click="show(name)">点击下显示</button>
20     <hr>
21     <button @click="show(name)">点击下显示</button>
22 </div>
23 
24 <script type="text/javascript">
25     var vue = new Vue({
26         el: "#vue",
27         data: {
28             msg: "钢铁侠",
29             name: "蜘蛛侠"
30         },
31         methods: {
32             show: function (name) {
33                 alert("皮特帕克：" + name);
34             }
35         }
36     })
37 </script>
38 </body>
39 </html>

2-2.运行结果

3，Vue03 --- 实现跑马灯效果

3-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 <h1>使用Vue实现跑马灯效果</h1>
10 
11 <div id="vue">
12     <button @click="lang()">开始</button>
13     <button @click="stop()">停止</button>
14     <h3 v-html="info"></h3>
15 </div>
16 
17 <script type="text/javascript">
18     var vue = new Vue({
19         el: "#vue",
20         data: {
21             info: "猥琐发育别浪~稳住我们能赢~发起进攻~回防高地~",
22             timer: null    //计时器
23         },
24         methods: {
25             lang: function () {
26                 //此时的this就是vm对象（info、lang、stop等都是直接挂在vm身上的）
27                 //console.log(this.info);
28                 if (this.timer !== null) {
29                     return;
30                 }
31                 this.timer = setInterval(() => { //设置间隔
32                     //此时的this代表vm对象
33                     //console.log(this);
34                     this.info = this.info.substring(1).concat(this.info.charAt(0));
35                 }, 200);
36             },
37 
38             stop() {
39                 clearInterval(this.timer);  //清除间隔
40                 this.timer = null;
41             }
42         }
43     })
44 </script>
45 </body>
46 </html>

3-2.运行结果

4，Vue04 --- 双向数据绑定和实现计算机

4-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue04 --- 双向数据绑定和实现计算机</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 <div class="box">
10     <h1>Vue中的双向数据绑定指令v-mode</h1>
11     <label>单价：<input type="text" v-model="price"></label><br/>
12     <label>数量：<input type="text" v-model="num"></label><br/>
13     <button @click="calc1()">点击计算总价</button>
14     <br/>
15     <label>总价：<span style="color:red" v-text="sum"></span></label>
16     <hr/>
17     <h1>使用v-mode双向数据绑定实现建议计算器</h1>
18     <label>操作数1：<input type="text" v-model="num1"/></label>
19     <select v-model="operator">
20         <option value="+">+</option>
21         <option value="-">-</option>
22         <option value="*">x</option>
23         <option value="/">/</option>
24     </select>
25     <label>操作数1：<input type="text" v-model="num2"/></label>
26     <button @click="calc2()">=</button>
27     <span style="font-size: 20px;color:blue" v-text="result"></span>
28 </div>
29 
30 <script type="text/javascript">
31     var vue = new Vue({
32         el: ".box",
33         data: {
34             price: 3,
35             num: 2,
36             sum: 6,
37             num1: '1',
38             num2: '2',
39             operator: '+',
40             result: 3
41         },
42         methods: {
43             calc1() {
44                 this.sum = this.price * this.num;
45             },
46             calc2() {
47                 // JavaScript的eval()方法可以把一个字符串当作JavaScript代码执行，并返回执行结果
48                 //当代码很复杂或难以控制时可以使用此方法，大多数还是使用标准方法执行JavaScript代码
49                 this.result = eval("parseInt(this.num1)" + this.operator + "parseInt(this.num2)");
50             }
51         }
52     })
53 </script>
54 </body>
55 </html>

4-2.运行结果

5，Vue05 --- for指令

5-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue05 --- for指令</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <h1>Vue中的for指令</h1>
11 
12     <!--val in arrays，这个var就是取出来的值-->
13     <!--遍历普通数组-->
14     <p v-for="name in names">{{name}}</p>
15     <!--数组下标从0开始，index是默认的属性-->
16     <p v-for="name,index in names" v-text="name+'--->'+index"/>
17     <hr>
18     <!--遍历对象数组-->
19     <p v-for="user in users">id：{{user.id}}-->名字：{{user.name}}-->年龄：{{user.age}}</p>
20     <hr>
21     <!--遍历普通对象的键和值-->
22     <p v-for="value,key in Shandx">{{key}}---{{value}}</p>
23     <!--for循环固定的次数,遍历的值名不能为var-->
24     <p v-for="num in 3">{{num}}</p>
25 
26     <h1>Vue中的for指令实现数据绑定</h1>
27     <label>id：<input type="text" v-model="id"/></label>
28     <label>name：<input type="text" v-model="name"/></label>
29     <label>age：<input type="text" v-model="age"/></label>
30     <label><button @click="add()">添加人员信息</button></label>
31     <p v-for="user in users" :key="user.id">
32         <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
33     </p>
34 </div>
35 
36 <script src="../lib/vue.js"></script>
37 <script>
38     var vm = new Vue({
39         el:"#app",
40         data:{
41             names:["蜘蛛侠","钢铁侠","美国队长","雷神"],
42             users:[
43                 {id:1,name:"科比",age:39},
44                 {id:2,name:"韦德",age:37},
45                 {id:3,name:"库里",age:32}
46             ],
47             Shandx:{id:1,name:"闪电侠",age:3,hobby:"run"}
48         },
49         methods:{
50             add(){
51                 //数组的push()方法用于向数组末尾加入元素
52                 //数组的unshift()方法用于向数组最前面加入元素
53                 this.users.unshift({id:this.id,name:this.name,age:this.age});
54             }
55         }
56     });
57 </script>
58 </body>
59 </html>

5-2.运行结果

6，Vue06 --- if和show指令

6-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue06 --- if和show指令</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9     <h1>使用vue中的v-if和v-show指令实现元素的显示和隐藏</h1>
10     <div id="app">
11         <button @click="toggle()">显示</button>
12         <button @click="flag=!flag">隐藏</button>
13         <!--v-if为true，则显示-->
14         <p v-if="flag">我是使用v-if控制的p标签</p>
15         <!--v-show为true，则显示-->
16         <p v-show="flag">我是使用v-show控制的p标签</p>
17     </div>
18     <script type="text/javascript">
19         var vm = new Vue({
20             el:"#app",
21             data:{
22                 flag:true
23             },
24             methods:{
25                 toggle(){
26                     this.flag = !this.flag;
27                 }
28             }
29         });
30     </script>
31 </body>
32 </html>

6-2.运行结果

7，Vue07 --- 在Vue中自定义过滤器

7-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue07 --- 在Vue中自定义过滤器</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 <h1>在Vue中自定义过滤器</h1>
10 <div id="app1">
11     {{msg|show()}}
12 </div>
13 <div id="app2">
14     {{msg|show()}}
15 </div>
16 
17 <!--导入Vue-->
18 <script>
19     //全局过滤器
20     Vue.filter("show",function(a){
21         return a.replace('钢铁侠',"*")
22     });
23 
24     var vm1 = new Vue({
25         el:"#app1",
26         data:{
27             msg:"我是钢铁侠"
28         },
29         filters:{
30             show:function(a){
31                 return a.replace('钢铁侠',"#")
32             }
33         }
34     });
35 
36     var vm2 = new Vue({
37         el:"#app2",
38         data:{
39             msg:"我是钢铁侠"
40         },
41         filters:{
42             show(a){
43                 return a.replace('钢铁侠',"!")
44             }
45         }
46     });
47 </script>
48 </body>
49 </html>

7-2.运行结果

8，Vue08 --- Vue中自定义指令详细测试

8-1.代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue中自定义指令详细测试</title>
 6     <script src="../lib/vue.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <input type="text" v-shandx="'red'" value="闪电侠"/>
12 </div>
13 
14 <script>
15     //自定义指令 v-*
16     Vue.directive("shandx",{
17         bind:function (el,binding) {
18             //el,指代指令作用的元素
19             //binding.value 就是你自定义指令后面的具体指 ， v-shandx=""
20             el.style.color = binding.value;
21         }
22     });
23     var vm = new Vue({
24         el:"#app",
25         directives:{}
26     })
27 </script>
28 </body>
29 </html>

8-2.运行结果

posted @ 2020-07-17 10:13 edda_huang 阅读(145) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

edda_huang