1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7 <title>Document</title>
8 <script src="lib/vue.js"></script>
9 <style type="text/css">
10 [v-cloak]{
11 display: none;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="app">
17 <!-- 使用v-cloak可以解决 插值表达式闪烁的问题 -->
18 <p v-cloak>{{ msg }}</p>
19 <h4 v-text="msg"></h4>
20 <!-- 默认v-text是没有闪烁问题的 -->
21 <!-- v-tsxt会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 -->
22 <div v-html="msg2"></div>
23 <!-- v-html也会覆盖元素中原本的内容,会把目标内容按html格式解析 -->
24
25
26 <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" /> -->
27 <!-- v-bind:是vue中提供的用于绑定属性的指令,就是告诉title要把mytitle当成变量处理,而不是普通字符串,缩写是 : -->
28 <!-- v-bind中可以写合法的JS表达式 -->
29
30 <input type="button" value="按钮" @click="show" />
31 <!-- vue中提供了 v-on: 事件绑定机制 缩写是 @ -->
32 </div>
33
34 <script type="text/javascript">
35 var vm = new Vue({
36 el:'#app',
37 data:{
38 msg:'123',
39 msg2:'<h1>hhhhh</h1>',
40 mytitle:'这是一个自己定义的title'
41 },
42 methods:{ //这个methods属性中定义了当前vue实例所有可用的方法
43 show:function(){
44 alert('hello')
45 }
46 }
47 })
48
49
50 </script>
51 </body>
52 </html>
##跑马灯的简单实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7 <title>Document</title>
8 <!-- 1.导入vue包 -->
9 <script src="lib/vue.js"></script>
10 </head>
11 <body>
12 <div id="app">
13 <h4>{{ msg }}</h4>
14 <input type="button" value="浪起来" @click="lang"/>
15 <input type="button" value="别浪" @click="stop"/>
16
17 </div>
18 <!-- 2.创建一个要控制的区域 -->
19 <script type="text/javascript">
20 //注意:在vm实例中如果想要获取data上的数据或者想调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问,
21 // 这里的this,就表示我们new出来的vm实例对象
22 var vm = new Vue({
23 el:'#app',
24 data:{
25 msg:'猥琐发育，别浪~~！',
26 intervalId:null //在 data上定义定时器Id
27 },
28 methods:{
29 lang(){
30 if(this.intervalId != null)return;
31 //判定,避免每次点击都重新开启一个定时器
32 this.intervalId = setInterval( () => { //定时器
33 // => 箭头函数,让内部的this与外部的vm实例保持一致,避免访问不到vm实例中的数据
34 //获取到头的第一个字符
35 var start = this.msg.substring(0,1)
36 //获取到后面的所有字符
37 var end = this.msg.substring(1)
38 //重新拼接得到新的字符串,并赋值给this.msg
39 this.msg = end + start
40 },400)
41
42
43 //注意:vm实例会监听自己身上data中的数据改变,只要数据一发生改变,就会自动把最最新的数据从data上同步到页面中
44 // 程序员只需要关心数据,不用考虑怎样重新渲染dom
45 },
46 stop(){ //停止计时器
47 clearInterval(this.intervalId)
48 this.intervalId = null;
49 //每当清除了定时器之后需要吧intervalId置为null,否则无法再次开启定时器
50 }
51 }
52
53 })
54
55 // 分析:
56 // 1.给[浪起来]按钮绑定一个点击事件
57 // 2.按钮的时间处理函数中写相关的业务逻辑代码:拿到msg字符串,然后调用字符串的substring方法进行字符串的截取操作,吧第一个字符截取出来放到最后一个位置
58 // 3.为了实现点击一下按钮自动截取的功能,需要把步骤2中的代码放到一个定时器中
59 </script>
60 </body>
61 </html>
##事件修饰符
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7 <title>Document</title>
8 <script src="lib/vue.js"></script>
9 <style type="text/css">
10 .inner{
11 height: 150px;
12 background-color: darkcyan;
13 }
14 </style>
15 </head>
16 <body>
17 <div id="app">
18 <!-- <div class="inner" @click="div1Handler">
19 <input type="button" value="戳他" @click.stop="btnHandler"/>
20 使用 .stop 阻止冒泡(多层元素从里到外依次触发事件)
21 </div> -->
22
23 <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
24 使用 .prevent 阻止默认行为 -->
25
26 <!-- <div class="inner" @click.capture="div1Handler">
27 <input type="button" value="戳他" @click="btnHandler"/>
28 使用 .capture 实现捕获事件的触发机制
29 </div> -->
30
31 <!-- <div class="inner" @click.self="div1Handler">
32 <input type="button" value="戳他" @click="btnHandler"/>
33 使用 .self 实现只有点击当前元素时才会触发事件处理函数,阻止自身的冒泡行为(不阻止其他元素的冒泡),
34 </div> -->
35
36 <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
37 使用 .once 实现只触发一次事件处理函数
38 -->
39 </div>
40 <script type="text/javascript">
41 var vm = new Vue({
42 el:'#app',
43 data:{ },
44 methods:{
45 // div1Handler(){
46 // console.log('这是触发 inner div的点击事件')
47 // },
48 // btnHandler(){
49 // console.log('这是触发了 btn按钮的点击事件')
50 // }
51 linkClick(){
52 console.log('触发了链接的点击事件')
53 }
54 }
55 });
56 </script>
57 </body>
58 </html>
##v-model指令实现双向数据绑定
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7 <title>Document</title>
8 <script src="lib/vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <p>{{ msg }}</p>
13 <!-- <input type="text" :value="msg" style=" 100%;"/> -->
14 <!-- v-bind只能实现单向数据绑定,从M自动到绑定到V,无法实现双向数据绑定 -->
15
16 <input type="text" v-model="msg" style=" 100%;"/>
17 <!-- 使用 v-model 指令可以实现双向数据绑定
18 注意:只能用于 表单元素(能与用户实现交互的元素)中 -->
19 </div>
20 <script type="text/javascript">
21 var vm = new Vue({
22 el:'#app',
23 data:{
24 msg:'大家都是好boy'
25 },
26 methods:{
27
28 }
29 })
30 </script>
31 </body>
32 </html>
##利用双向数据绑定做简易计算器
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7 <title>Document</title>
8 <script src="lib/vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <input type="text" v-model="n1" />
13
14 <select v-model="opt">
15 <option value ="+">+</option>
16 <option value ="-">-</option>
17 <option value ="*">*</option>
18 <option value ="/">/</option>
19 </select>
20
21 <input type="text" v-model="n2" />
22 <input type="button" value="=" @click="calc"/>
23 <input type="text" v-model="result"/>
24 </div>
25 <script type="text/javascript">
26 var vm = new Vue({
27 el:'#app',
28 data:{
29 n1:0,
30 n2:0,
31 result:0,
32 opt:'+'
33 },
34 methods:{
35 calc(){
36 // switch(this.opt){
37 // case '+':
38 // this.result = parseInt(this.n1) + parseInt(this.n2)
39 // break;
40 // case '-':
41 // this.result = parseInt(this.n1) - parseInt(this.n2)
42 // break;
43 // case '*':
44 // this.result = parseInt(this.n1) * parseInt(this.n2)
45 // break;
46 // case '/':
47 // this.result = parseInt(this.n1) / parseInt(this.n2)
48 // break;
49 // }
50
51 //注意,这还是投机取巧的方式,正式开发中尽量少用
52 var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
53 this.result = eval(codeStr)
54 }
55 }
56 })
57 </script>
58 </body>
59 </html>
