Vue---基础笔记（基础的构建）

时间 2020-06-01

标签 vue 基础笔记构建繁體版

原文原文链接

vue 基础

准备工做

chrome浏览器插件安装

完成后出现标记css

vue页面标记须要使用vue.js非vue.min.jshtml

调试页面vue

结构模型MVVM = m:model + v:view + vm

view(dom) ------dom listeners-----》 Model（data）node

　　《------data bindings----jquery

1. 调试运行Helloword

vue与jquery比较

vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="clickfunc">点击</button>

</div>

<script>
new Vue({ el:'#app', data:{ message:'before' }, methods:{ clickfunc:function () { this.message='after' } } }) </script>
</body>
</html>

View Code

jquery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <p id="pp">before</p>
10     <button id="bt">点击</button>
11 </div>
12 
13 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
14 <script>
15  $('#bt').click(function () { 16  $('#pp').text('after'); 17  }) 18 </script>
19 
20 </body>
21 </html>

View Code

双向绑定例子

{{username}} 和input有默认值（绑定到username），{{username}} 随input输入框输入而变化。chrome

 1 <div id="app">
 2   <input type="text" v-model="username">
 3   <p>{{username}}</p>
 4 </div>
 5 
 6 <script src="../vue.js"></script>
 7 <script>
 8  const vm = new Vue({  9  el:'#app', 10  data:{ 11  username:'default name'
12  }, 13  }); 14 
15 </script>

View Code

2. 模版

模版示例数组

{{变量或者执行函数}} ：属性中绑定 @监听浏览器

 1 <div id="app">
 2   <h2>1. 双大括号表达式</h2>
 3   <p>{{msg}}</p> <!-- 无v-model时，区分大小写 -->
 4   <p>{{msg.toUpperCase()}}</p>
 5   <p v-html="msg"></p>
 6   <p v-text="msg"></p>
 7 
 8   <h2>2. 指令 强制数据绑定，原Html语法绑定为变量</h2>
 9   <!--<img src={{imgurl}} alt=""> 标签属性不能用双大括号引用变量 -->
10   <img v-bind:src="imgurl" alt="">
11   <img :src="imgurl" alt="">    <!-- 简写 -->
12 
13   <h2>3. 指令 绑定事件监听</h2>
14   <button v-on:click="func1">点击1</button>
15   <button @click="func1">点击2</button>
16   <button @click='func2("abc")'>点击3</button>   <!-- 回传参数 -->
17   <button @click="func2(msg)">点击4</button>  <!-- 回传变量 -->
18 
19 </div>
20 
21 <script src="../vue.js"></script>
22 <script>
23  const vm = new Vue({ 24  el:'#app', 25  data:{ 26  msg:'default msg', 27  imgurl:'http://www.tangvelley.com/static/images/bloglogo.png', 28  }, 29  methods:{ 30  func1:function () { 31  alert('ok') 32  }, 33  func2(content){ 34  alert(content,'ES6简写fun语法'); 35  }, 36  } 37  }); 38  vm.msg='<B>msg22222</B>'
39 
40 </script>

View Code

显示效果缓存

1. 双大括号表达式 <B>msg22222</B>

<B>MSG22222</B> msg22222 <B>msg22222</B> 2. 指令 强制数据绑定，原Html语法绑定为变量 图片1 图片2 3. 指令 绑定事件监听 点击1 点击2 点击3 点击4

View Code

3. 计算属性和监视

case

计算computed 执行：【1】初始化【2】相关data发生改变。注意get 和set方法。set有缓存。app

监视watch方法参考便可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="app"> firstname<input type="text" v-model="firstname"> lastname <input type="text" v-model="lastname">

<hr> display1 <input type="text" v-model="fullname1">
    <hr> display2 <input type="text" v-model="fullname2">
    <p></p> display3 <input type="text" v-model="fullname3">
<p>{{fullname1}}</p>
<p>{{fullname1add()}}</p>

</div>
<script src="../vue.js"></script>
<script> const vm= new Vue({ el:'#app', data:{ firstname:'first', lastname:'last', }, computed:{ //计算 初始化显示 或者 data属性发生变化时执行
        //函数方式 单向
 fullname1(){ return this.firstname + ' ' + this.lastname }, // 对象
 fullname3:{ //设置(set)fullname3 及 fullname3发生变化时set
 get(){ //计算并返回当前值，当须要读取当前值时回调
                //回调函数（定义了，没有调用，却执行了）
                return this.firstname + ' ' + this.lastname; }, set(value){ //value 是fullname3最新值
                //当属性发生改变时,更新相关属性
                //回调函数,监视监视监视（不是设置）当前属性值（fullname3）变化
                this.firstname=value.split(' ')[0]; this.lastname=value.split(' ')[1]; } }, }, methods:{ fullname1add(){ return this.firstname + ' ' + this.lastname }, }, watch:{ //监视 无初始化，当变化时触发
        //名称为监视对象
 firstname:function (newval, oldval) { console.log(newval); console.log(oldval); console.log(this); this.fullname2=newval + this.lastname } } }); //监视另外一种写法
 vm.$watch('lastname',function (newval, oldval) { this.fullname2 = this.firstname + newval }) </script>


</body>
</html>

View Code

methods computed watch区别

methods里面定义的函数，是须要主动调用的，而和watch和computed相关的函数，会自动调用,完成咱们但愿完成的做用

watch擅长处理的场景：一个数据影响多个数据

computed擅长处理的场景：一个数据受多个数据影响,及利用set get双向设置，功能更强大方便。

区别2

watch对象是变化的值，受影响对象做相关赋值操做

compute对象是受影响对象，直接return 相关结果

4. class与style绑定

主要利用v-bind ，

class 字符串形式：不一样于默认html只读取第一个class，能够整合两个class（1个默认，1个变量）

：class对象形式：｛｝，其中key常量，value变量从vue的data中获取。通常经常使用布尔形式 :class="{aclass:trueorfalse1,bclass:trueorfalse2}"注意引号value上没有

：style对象形式：参考上。注意 key与html style的key有不一样。value为普通值string等，注意value无引号

case

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue </title>
 6   <style>
 7  .default {
 8  font-size: 50px;
 9     }
10  .red {
11  color:red;
12     }
13  .blue {
14  color: blue;
15     }
16 
17   </style>
18 
19 <script src="../vue.js"></script>
20 </head>
21 <body>
22 <div id="app">
23 
24 <h2 class="default" :class="extra_class">字符串方式，能够整合两个class，默认html只读第一个class</h2>
25 <h2 :class="{blue:act1,red:act2}">对象方式用｛｝，常量key，变量value到data取值,注意act1 无引号</h2>
26   <button @click="fun1">点击</button>
27 <h2 style="color: #00B0E8;font-size: small;">默认style</h2>
28 <h2 :style="{color:v1,fontSize:v2}">对象style, 参数（如fontSize对应font-size）与htmlstyle参数略有不一样</h2>
29 
30 </div>
31 
32 <script>
33  const vm=new Vue({ 34  el:'#app', 35  data:{ 36  extra_class:'red', 37  act1:false, 38  act2:true, 39  v1:'green', 40  v2:'30px', 41  }, 42  methods:{ 43  fun1(){ 44               this.extra_class='blue'; 45               this.act1='true'; 46               this.act2='false'; 47  } 48  } 49  }) 50 
51 </script>
52 </body>
53 </html>

View Code

5. 条件渲染

v-if v-else v-show

case1

支持@click="state=!state"表达式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue </title>
 6   <style>
 7  .default {
 8  font-size: 50px;
 9     }
10  .red {
11  color:red;
12     }
13  .blue {
14  color: blue;
15     }
16 
17   </style>
18 
19 <script src="../vue.js"></script>
20 </head>
21 <body>
22 <div id="app">
23 
24 <h2 class="default" :class="extra_class">字符串方式，能够整合两个class，默认html只读第一个class</h2>
25 <h2 :class="{blue:act1,red:act2}">对象方式用｛｝，常量key，变量value到data取值,注意act1 无引号</h2>
26   <button @click="fun1">点击</button>
27 <h2 style="color: #00B0E8;font-size: small;">默认style</h2>
28 <h2 :style="{color:v1,fontSize:v2}">对象style, 参数（如fontSize对应font-size）与htmlstyle参数略有不一样</h2>
29 
30 </div>
31 
32 <script>
33  const vm=new Vue({ 34  el:'#app', 35  data:{ 36  extra_class:'red', 37  act1:false, 38  act2:true, 39  v1:'green', 40  v2:'30px', 41  }, 42  methods:{ 43  fun1(){ 44               this.extra_class='blue'; 45               this.act1='true'; 46               this.act2='false'; 47  } 48  } 49  }) 50 
51 </script>
52 </body>
53 </html>

View Code

v-if 与v-show 在浏览器端差异

直接true false形式

1   <p v-show="true">默认显示</p>
2   <p v-show="false">默认不显示</p>
3   <p v-if="false">true</p>
4   <p v-else>false</p>

View Code

6. 列表

6.1 列表渲染

数组（列表）遍历

case 1

：key=”index“ 用途 https://www.cnblogs.com/tim100/p/7262963.html 影响渲染

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue </title>
 6 <script src="../vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="demo">
10 
11   <ul>
12     <li v-for="(person,index) in persons" :key="index">
13  {{index}}--{{person.name}}--{{person.age}} 14     </li>
15   </ul>
16 
17 </div>
18 
19 <script>
20 new Vue({ 21  el:'#demo', 22  data:{ 23  persons:[ 24  {name:'n1',age:18}, 25  {name:'n2',age:20}, 26  {name:'n3',age:22}, 27  {name:'n4',age:24}, 28  ] 29  } 30 }) 31 </script>
32 </body>
33 </html>

View Code

注意数组方法

一、调用$set方法： this.arr.$set(index, val); 1 二、调用splice方法： this.arr.splice(index, 1, val); 1 2、合并数组： this.arr = this.arr.concat(anotherArr); 1 3、清空数组： this.arr = []; 1 4、主要的数组方法： 一、变异方法（修改了原始数组），vue为触发视图更新，包装了如下变异方法： push() pop() shift() unshift() splice() //不管什么时候，使用该方法删除元素时注意数组长度有变化，bug可能就是由于她 sort() reverse() 1 2 3 4 5 6 7 二、非变异方法（不会修改原始数组而是返回一个新数组），如concat()、filter()，使用时直接用新数组替换旧数组，如上面的合并数组例子。 5、注意： //如下操做均没法触发视图更新 this.arr[index] = val; this.arr.length = 2; 1 2 3 详细了解请参考vue官方文档数组变更检测。

View Code

数组变化---视图是否变化---数组是否变化规则

vue监视对象是否发生变化，不监视对象内部。数组方法已被重写为vue变异方法

https://blog.csdn.net/fengjingyu168/article/details/79782957 一、数组变化-视图更新-原始数组变化 push() pop() shift() unshift() splice() sort() reverse() 二、数组变化-视图更新-原始数组不变 filter() concat() slice() 三、数组变化-视图不变 经过索引直接设置项 this.items[2] = {name: 'abc'} 1 解决方式1：使用$set this.$set(app.items, 2, {name: 'abc'}) 1 解决方式2：使用splice() this.items[2].splice(2, 1, {name: 'abc'}) 1 修改数组长度 this.items.length = 2 1 解决方法： this.items.splice(2)

View Code

case2

添加删除与更新方法，注意vue变异方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">

  <ul>
      <!-- index值随页面变化而变化，删除0号，原1号的index变为0 -->
      <!-- key值这里选了index，实际最好选择不变的数据id -->
    <li v-for="(person,index) in persons" :key="index"> {{index}}--{{person.name}}--{{person.age}} <button @click="deleteP(index)">删除</button>
        <button @click="updateP(index,{name:'zz',age:25})">更新</button>
    </li>
  </ul>

</div>

<script>
new Vue({ el:'#demo', data:{ persons:[ {name:'n1',age:18}, {name:'n2',age:20}, {name:'n3',age:22}, {name:'n4',age:24}, ] }, methods:{ deleteP:function (index) { this.persons.splice(index,1) }, updateP (index,newP){ // this.persons[index]=newP 数组变化，页面不变，详见Vue变异方法说明
            this.persons.splice(index,1,newP) } } }) </script>
</body>
</html>

View Code

v-for遍历对象（比较少用）

case3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">

  <ul>
      <!-- index值随页面变化而变化，删除0号，原1号的index变为0 -->
      <!-- key值这里选了index，实际最好选择不变的数据id -->
    <li v-for="(person,index) in persons" :key="index"> {{index}}--{{person.name}}--{{person.age}} <button @click="deleteP(index)">删除</button>
        <button @click="updateP(index,{name:'zz',age:25})">更新</button>
    </li>
  </ul>

    <hr>
<ul>
    <li v-for="(item,key) in persons[1]" :key="key"> {{key}}:{{item}} </li>
</ul>


</div>

<script>
new Vue({ el:'#demo', data:{ persons:[ {name:'n1',age:18}, {name:'n2',age:20}, {name:'n3',age:22}, {name:'n4',age:24}, ] }, methods:{ deleteP:function (index) { this.persons.splice(index,1) }, updateP (index,newP){ // this.persons[index]=newP 数组变化，页面不变，详见Vue变异方法说明
            this.persons.splice(index,1,newP) } } }) </script>
</body>
</html>

View Code

6.2 列表搜索排序

补充，filter方法

https://blog.csdn.net/bossxu_/article/details/80756563 https://blog.csdn.net/tang15886395749/article/details/65629898 filter(item => item) filter((item,index,arr)=>{ return item>2 })

View Code

case

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo2">
    <input type="text" v-model="searchname">
    <ul>
        <!--<li v-for="(person,index) in persons">-->
            <!--{{index}}&#45;&#45;{{person.name}}&#45;&#45;{{person.age}}-->
        <!--</li>-->
        <li v-for="(person,index) in filterpersons"> {{index}}--{{person.name}}--{{person.age}} </li>

    </ul>
    <button @click="setOrderType(1)">age升序</button>
    <button @click="setOrderType(2)">age降序</button>
    <button @click="setOrderType(0)">原顺序</button>


</div>

<script>
new Vue({ el:'#demo2', data:{ searchname:'', orderType:0, // 0原顺序， 1升序， 2降序
 persons:[ {name:'n1',age:28}, {name:'n2',age:20}, {name:'n3',age:22}, {name:'n4',age:24}, ] }, computed:{ filterpersons(){ // let retperson; // retperson=this.persons.filter(person=>person.name.indexOf(this.searchname)!==-1);
 const {searchname,persons,orderType}= this; let retperson; retperson=persons.filter(person => person.name.indexOf(searchname)!==-1); if (orderType!==0){ retperson.sort(function (person1,person2) { //负数p1在前
                    if(orderType===1){ return person1.age-person2.age; }else{ return person2.age-person1.age; } }) } return retperson } }, methods:{ setOrderType(type){ this.orderType=type; } } }) </script>
</body>
</html>

View Code

7. 事件处理

绑定监听

多种绑定方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
<button @click="test1()">bt1</button>
<button @click="test2('abc')">bt2</button>
<button @click="test3">bt3</button>
  
</div>

<script> let vm = new Vue({ el:'#demo', data:{ test1(){ alert(1); }, test2(a){ alert(a); } }, methods:{ test3(){ alert(3); } } }) </script>
</body>
</html>

View Code

$event

经常使用event

event.target.nodeName 　　 //获取事件触发元素标签name

event.target.id　　　　　　　//获取事件触发元素id

event.target.className　　 //获取事件触发元素classname

event.target.innerHTML

event.target.value // input值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
<button @click="test5">bt5</button>   <!--能够省略$event -->
<button @click="test6(6,$event)">bt6</button>

</div>

<script> let vm = new Vue({ el:'#demo', data:{ test5(event){ alert(event.target.innerHTML); }, test6(num,event){ alert(num + event.target.innerHTML); } } }) </script>
</body>
</html>

View Code

事件修饰符（如@click）

@click.stop='xxx' 中止冒泡。不然显示inner后再显示out

@click.prevent='xx' 默认行为阻止

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
<div style="width: 200px;height: 200px;">" @click="sp1"> <div style="width: 50px;height:50px;">" @click.stop="sp2"></div>
</div>

  <a href="http://www.baidu.com" @click.prevent="sp3">点击</a>

</div>

<script> let vm = new Vue({ el:'#demo', data:{ sp1(){ alert('out'); }, sp2(){ alert('inner'); }, sp3(){ alert('333'); }, }, }) </script>
</body>
</html>

View Code

按键修饰符

需求：按键enter时触发

@keyup.enter="test" 键盘按键的修饰符，监听enter。不加.enter会监听全部按键。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
  <input type="text" @keyup="sp4">
  <input type="text" @keyup.13="sp5">
  <input type="text" @keyup.enter="sp5">  <!-- 少数特殊key直接写名称 -->

</div>

<script> let vm = new Vue({ el:'#demo', data:{ sp4(event){ if(event.keyCode===13) { alert(event.target.value + event.key + event.keyCode) } }, sp5(event){ alert(event.target.value); } }, }) </script>
</body>
</html>

View Code

8.表单数据的自动收集

html 表单中的name改成v-model 。

form头的 onSubmit改成@submit.prevent

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demoform">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名</span><input type="text" v-model="username"><br>
    <span>密码</span><input type="text" v-model="pwd"><br>
    <span>性别></span>
    <input type="radio" v-model="gender" value="女" id="female"><label for="female">女</label>
    <input type="radio" v-model="gender" value="男" id="male"><label for="male">男</label><br>
    <span>爱好</span>
    <input type="checkbox" v-model="hobbit" value="basket" id="basket"><label for="basket">篮球</label>
    <input type="checkbox" v-model="hobbit" value="foot" id="foot"><label for="foot">足球</label><br>
    <span>城市</span>
    <select v-model="yourcity">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city,index) in citys" :key="index">{{city.name}}</option>
    </select><br>
    <span>介绍</span>
    <textarea v-model="intro" id="" cols="30" rows="10"></textarea>
    <input type="submit" value="注册 ">
  </form>



</div>

<script>
new Vue({ el:'#demoform', data:{ username:'', pwd:'', gender:'男', hobbit:['foot'], citys:[{id:1,name:'上海'},{id:2,name:'北京'},{id:3,name:'广州'}], yourcity:3, intro:'', }, methods:{ handleSubmit(){ console.log(this.username,this.hobbit,this.yourcity); } } }) </script>
</body>
</html>

View Code

9. vue 生命周期

10. 过渡&动画

实际操做css的transition和animation

效果及状态详细https://cn.vuejs.org/v2/guide/transitions.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
  <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s;
} .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0;
}

  </style>
</head>
<body>
<div id="demo">

  <button @click="show=!show">toggle</button>
  <p v-show="show">内容1</p>

  <transition name="fade">  <!--name 用于css样式名 -->
    <p v-if="show">内容2</p>
  </transition>


</div>

<script>
new Vue({ el:'#demo', data:{ show:true, } }) </script>
</body>
</html>

View Code

11.过滤器（格式化）

时间格式化

1. moment插件http://momentjs.cn/

2. Vue.filter功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="../vue.js"></script>
  <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s;
} .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0;
}

  </style>
</head>
<body>
<div id="demo">

  <p>{{date1}}</p>
  <p>{{date1 | dateStr}}</p>
    <p>{{date1 | dateStr('YYYY-MM-DD')}}</p>


</div>

<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script> Vue.filter('dateStr',function (val,formatstr='YYYY-MM-DD HH:mm:ss a') { return moment(val).format(formatstr); // return moment(val).format(formatstr || 'YYYY-MM-DD HH:mm:ss a')
 }); new Vue({ el:'#demo', data:{ date1:new Date(), } }) </script>


</body>
</html>

View Code

12. 指令补遗

列表

v-text 更新textConten

v-html 更新元素InnerHTML

v-if ,v-show，v-else，v-for，

v-on，简写为 @

v-bind 简写为：

v-model双向绑定

ref 惟一标识

v-cloak 防止闪现表达式

内容显示标签

v-model

通常位于input等form标签中，放在span中不能令span产生内容。v-text v-html改变span标签内内容

双向绑定

v-text v-html比较

v-text 原样显示

v-html 会解析标签，无含义的标签同html无效果。但v-html容易受XSS攻击。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="demo">

    <span v-text="msg"></span><br>
    <span v-html="msg2"></span>

</div>

<script>
    new Vue({ el: '#demo', data: { msg: '<b>aaa</b>', msg2: '<a>bbb</a>', } }) </script>

</body>
</html>

View Code

{{}}与 v-text比较

都是单向绑定，数据对象改变影响页面值改变，反之不行。基本相同。

{{}}视做v-text简写形式。

当网速过慢时页面显示暴露{{}}

v-text与 v-once单次绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="demo">

    <span v-text="msg">{{msg}}</span><br>
    <span v-once>{{msg2}}</span>
    <button @click="change">点击改变</button>

</div>

<script>
    new Vue({ el: '#demo', data: { msg: 'aaa', msg2: 'bbb', }, methods:{ change(){ this.msg+='msg1'; this.msg2+='msg2'; }, } }) </script>

</body>
</html>

View Code

ref

标识符，能够方便定位，经过textContent 或者innerHTML获取标签内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="demo2">

<p ref="mycontent">{{msg}}</p>
<button @click="hint">点击提示其余标签</button>
</div>

<script>
    new Vue({ el: '#demo2', data: { msg: 'aaa', msg2: 'bbb', }, methods:{ hint(){ console.log(this.$refs.mycontent.textContent) }, } }) </script>

</body>
</html>

View Code

v-cloak

利用解析完成后再也不存在特性，设置style display none 等

自定义指令

局部与全局指令定义位置与生效区间不一样。

案例略

13 插件

自定义插件 vue-mypluginnamexxx.js。注意须要向外暴露 window.xxx

引用时放在vue.js的引用以后。

script实际使用时，Vue.use(xxx)

14. 组件components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.js"></script>
</head>
<body>



<div id="app">
    <parent></parent>
</div>


<script> let child={ template:'<div>{{myMsg}}</div>', props:{myMsg:String} }; let parent={ template:'<div><child :my-msg="key1"></child></div>>', components:{child}, data(){ return { 'key1':'abc' } } }; new Vue({ el:'#app', components:{parent} }) </script>




</body>
</html>

View Code

Vue---基础笔记 （基础的构建 ）

vue 基础

准备工做

chrome浏览器插件安装

结构模型MVVM = m:model + v:view + vm

1. 调试运行Helloword

vue与jquery比较

vue

jquery

双向绑定例子

2. 模版

3. 计算属性和监视

case

methods computed watch区别

4. class与style绑定

5. 条件渲染

6. 列表

6.1 列表渲染

数组（列表）遍历

case 1

case2

v-for遍历对象（比较少用）

case3

6.2 列表搜索排序

7. 事件处理

绑定监听

多种绑定方式

$event

事件修饰符（如@click）

按键修饰符

8.表单数据的自动收集

9. vue 生命周期

10. 过渡&动画

11.过滤器（格式化）

12. 指令补遗

列表

内容显示标签

v-model

v-text v-html比较

{{}}与 v-text比较

v-text与 v-once单次绑定

ref

v-cloak

自定义指令

13 插件

14. 组件components

Vue---基础笔记（基础的构建）