11-(了解)定义vue的templateP12 - 00:03
代码规范
1、缩进2个空格基本，cli--创建editconfig缩进两个空格。
12-(掌握)插值操作-mustache语法P13 - 00:02
1、什么是插值：我们在data里面定义一个数据，希望把这个值插入到dom里面显示。
通过mustache语法也就是双大括号
mustache语法中，不仅可以直接写变量，也可以写简单的表达式。
2、指令v-once：第一次展示，数据改变的时候，不希望你跟着其他操作改变。加上这个指令之后 就不会改变。例如：
<h2 v-once>{{message}}</h2>
3、v-html:data里面一个标签的形式的时候，或者是链接，再或者两个都有，将这个展示到dom中使用，（既有链接又有html的时候）例如：
<div id="app">
<h2>{{message}}</h2>
<!--指令v-once：第一次展示，数据改变的时候，不希望你跟着其他操作改变。加上这个指令之后 就不会改变。例如：-->
<h2 v-once>{{message}}</h2>
<!--当我们使用 页面就会显示百度一下 文字-->
<h2 v-html="url"></h2>
</div>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
url:"<a href='www.baidu.com'>百度一下</a>"
}
})
</script>
4、v-text:直接展示文字效果，不够灵活。接受一个string，与v-html类似
5、v-pre：纯属原封不动的显示{{message}}
6、v-cloak:在vue解析之前，div中有一个属性v-cloak，vue实例解析之后就没有这个属性了，就显示数据了
14-(掌握)v-bind的基本使用P15 - 00:43
1、v-bind:绑定属性。
学习的所有指令作用都是讲值插入到我的模板的内容当中。
除了内容需要动态来决定之外，某些属性也需要绑定，比如 绑定a元素的href属性
img元素的src属性。
属性内部不能使用mustache语法{{}}，用v-bind指令。
v-bind:src="imgUrl"此时这个src是需要动态来绑定的，而动态来绑定的时候就会把这imgUrl当成一个变量，不再是字符串，就去vue实例中找对应的这个地址，再把这个地址放到这个属性的位置。
<!--错误的写法，就是一个简单的字符串，不能解析-->
<img src="imgUrl" alt="">
<!--正确的做法使用v-bind指令-->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="aHref"></a>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
url:"<a href='www.baidu.com'>百度一下</a>",
imgUrl:"aa.png",
aHref:"www.baidu.com" }
})
2、语法糖写法
<img :src="imgUrl" alt="">
<a :href="aHref"></a>
15-(掌握)v-bind动态绑定class(对象语法)P16 - 00:0616-(了解)v-bind动态绑定class(数组语法)P17 - 00:17
1、对象语法 class后面跟着一个对象。
<!--类名 对象{类名1:boolean,line:boolean布尔}-->
<!--也可以单独加class 内部会自己合并-->
<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>
<!--也可以写在方法里面之间调用函数-->
<h2 class="title" :class="getClasses()">{{message}}</h2>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
isActive:true,
isLine:true
},
methods:{
getClasses:function () {
return {active:this.isActive,line:this.isLine}
}
}
})
2、数组语法：用的比较少，
<!--数组语法-->
<!--字符串'active','line'-->
<h2 class="title" :class="['actives','lines']">{{message}}</h2>
<!--变量active,line 在vue实例中的data中定义的-->
<h2 class="title" :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getArrClass()">{{message}}</h2>
getArrClass:function () {
return [this.active,this.line]
}
17-(完成)v-bind和v-for结合的作业布置P18 - 00:0418-(掌握)v-bind动态绑定style(对象语法)P19 - 00:03
1、组件我们会将它分装到一个.vue的文件夹，可复用的组件
对象语法
<!--<h2 :style="{key(属性名)：value(属性值)}">{{message}}</h2>-->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:fontS+'px',fontColor:fontC}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
fontS:50,
fontC:"red"
},
methods:{
getStyle:function () {
return {fontSize:this.fontS+'px',fontColor:this.fontC}
}
}
})
19-(了解)v-bind动态绑定style(数组语法)P20 - 00:08
<!--数组语法-->
<h2 :style="[beaStyle,beaStyle1]">{{message}}</h2>
data:{
message:"你好啊",
beaStyle{background:'red',fontColor:'#ccc'},
beaStyle1:{fontSize:'50px'}
},
