vue学习（1）

    1. 属性绑定：v-bind:title=""
                            　　　　　　 :title
只能实现数据的单向绑定 从M到V。双向用v-model
2.动态绑定：取反
 3.事件绑定：v-on:click=""
                           @click=
4.v-model=""实现双向数据绑定，只能用在 表单元素 中（input【radio，text，address，email】，select，checkbox，textarea）
 
5.v-if=""
   v-else-if=""
6.v-show
7.v-for遍历数组 x in 数组名
               加索引(x,index) in 数组名  
           遍历对象(val,key,index) in 数组名
               加数字 num in 10             num值从1开始
索引都在最后 
 
8.渲染（为了避免创建多个容器div）：将div换成template（模板）
 
结果：
 9.：key
vue中列表循环（v-for）需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM
10.在页面中使用render函数渲染组件
11. v-cloak/v-text（会覆盖元素原本的内容）：解决加载时闪烁问题
      v-html（会覆盖元素原本的内容）：把内容当HTML放文中
 
 
跑马灯效果：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10 <div id="vue-app">
11     <input type="button" value="浪起来" @click="run">
12     <input type="button" value="低调" @click="stop">
13     <p>{{ msg }}</p>
14 </div>
15 <script>
16     var vm = new Vue({
17         el:"#vue-app",
18         data:{
19             msg:'mia san mia！我还是会支持拜仁慕尼黑!',
20             intervalId:null,//在data上定义，避免关闭定时器时在不同的方法上，不能调用
21         },
22         methods:{
23             run:function () {
24                 // var note = this;
25                 // setInterval(function () {
26                 //         //获取到第一个字符
27                 //         var start = note.msg.substring(0, 1);
28                 //         //获取到后面所有字符
29                 //         var end = note.msg.substring(1);
30                 //         //重新拼接
31                 //         note.msg = end + start;
32                 //         },400)
33 
34                 if (this.intervalId != null){
35                     return;
36                 }
37                 // 箭头函数
38                 this.intervalId = setInterval( () => {
39                         //获取到第一个字符
40                         var start = this.msg.substring(0, 1);
41                         //获取到后面所有字符
42                         var end = this.msg.substring(1);
43                         //重新拼接
44                         this.msg = end + start;
45                         },400)
46             },
47             stop() {
48                 clearInterval(this.intervalId);
49                 //清除定时器后，都需要把intervalId置为null
50                 this.intervalId = null;
51             },
52 
53 //注意：vm实例，会监听自己身上data数据的变化，一旦变化，会自动更新到页面。我们只要关心数据，不需要考虑如何重新渲染DOM页面
54 //注意：在vm实例中，如果想要获取data上的数据，或者methods里面的方法，都要通过this.属性名 或this.方法名来访问。这里的this就表示我们new出来的vm实例对象
55         },
56     })
57 </script>
58 </body>
59 </html>

 

 

简易计算器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10 <div id="app">
11     <input type="text" v-model="n1">
12     <select name="" id="" v-model="opt">
13         <option value="+">+</option>
14         <option value="-">-</option>
15         <option value="*">*</option>
16         <option value="/">/</option>
17     </select>
18     <input type="text" v-model="n2">
19     <input type="button" value="=" @click="calc">
20     <input type="text" v-model="result">
21 </div>
22 <script>
23     var vm = new Vue({
24         el:'#app',
25         data:{
26             n1:0,
27             n2:0,
28             result:0,
29             opt:'+',
30         },
31         methods:{
32             calc() {
33                 switch (this.opt) {
34                     case '+':
35                         this.result = parseInt(this.n1) + parseInt(this.n2);
36                         break;
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                 }
47 
48 
49                 // var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
50                 // this.result = eval(codeStr)
51             },
52 
53 
54         },
55     });
56 </script>
57 </body>
58 </html>

 

   
 
posted @ 2019-07-07 20:18  MonicaJIN  阅读(151)  评论(0)  编辑  收藏  举报