1._ / $ / # 这三种属性都是内部私有属性的一种标识,不希望外用
2.mustache 语法糖 {{ }}
几乎所有js类型都是支持的,除了null与undefine数据类型
挂载在window身上的全局属性我们都不能用,比如:console/alert
{{ }} 不写流程控制 for / if /while /do while
{{ }} 支持三元表达式,同样也支持运算符
短路原则也是支持的
vue的两个核心点
1.响应的数据变化
当数据发生变化----视图自动更新
2.组合的视图组件
UI页面映射为组件树
划分组件可维护、可复用、可测试
3.指令
指令的目的是做什么:操作DOM
解释:MVVM vm->v 数据驱动
所以:我们要直接操作数据,数据要想操作
v-html:转义输出,也就是可以解析xml数据
v-text:非转义输出,也就是无法解析xml类型数据
v-bind:将数据和属性进行单项数据绑定:将vue中数据赋值给属性值
<img v-bind:src = "src" />
<div v-bind:class = "">
</div>
<div v-bind:style = "">
</div>
v-bind简写形式
<img v-bind:src="src" alt="">
<img :src="src" alt="">
-
v-bind类名绑定
- 对象形式用法
<p :class = "{ bg: true,size: true }"></p> <p :class = "{ bg: true,size: false }"></p> <p :class = "{ [classA]: true,[classB]: true }"></p>
- 数组形式用法
<p :class = "[ 'size','bg' ]"></p> <p :class = "[ classA,classB ]"></p> <p :class = "[ classA,classB,5>3?'a':'b']"> </p>
1.列表渲染参数可以写三个,分别为 item key index
2.列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识
4.事件
v-on --》简写为 @
v-on-click–》@click
<div id="app">
<button v-on:click = 'fn'> 点击 </button>
<button @click = 'fn'> 点击 </button>
<button @click = "eventHandler"> 事件对象 </button>
<button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>
</div>
- js部分
<script>
/*
事件:
事件对象: 事件对象记录了整个事件的信息
事件参数
形式参数: 定义函数/方法时的参数
实际参数: 调用函数/方法时传入的参数
注意: 当一个事件处理程序中有多个参数,其中一个参数是事件对象式,我们在调用这个方法时,要添加一个实际参数 $event 与之对应
*/
new Vue({
el: '#app',
data: {
a: 10,
b: 20
},
methods: {
// methods称之为方法 ,里面存储是事件处理程序
fn () {
alert('事件')
},
eventHandler ( e ) {
console.log( e )
},
argumentHandler ( a,b,e ) {
// 思考: 如果我想在这个方法中使用事件对象,咋整?
console.log( e )
console.log( a + b )
}
}
})
- 还有一个特殊情况 事件冒泡
<div id="app">
<h3> 按键修饰符 </h3>
<div class="big" @click.stop='bigHandler'>
<div class="middle" @click.stop="middleHandler">
<div class="small" @click.stop="smallHandler"></div>
</div>
</div>
<h3> 键盘修饰符 </h3>
<input type="text" @keyUp.13="getValue">
<input type="text" @keyUp.enter="getValue">
</div>
- 下面是js部分
<script>
/*
Vue中对事件的功能的扩展
* 修饰符 - 修饰事件
* 按键修饰符
- stop
- self
- once
- ...
* 键盘修饰符
2. 自定义按键修饰符
Vue.config.keyCodes.f1 = 112
1. 先以一个案例的形式来讲述一下这个修饰符的好处
- 事件冒泡
- 回车弹出input的value
*/
Vue.config.keyCodes.f1 = 112
new Vue({
el: '#app',
methods: {
bigHandler(e) {
alert('big')
// e.stopPropagation()
},
middleHandler(e) {
alert('middle')
// e.stopPropagation()
},
smallHandler(e) {
alert('small')
// e.stopPropagation()
},
getValue(e) {
// if ( e.keyCode === 13 ) {
// console.log('执行了')
// }
console.log('执行了')
}
}
})
5. 条件渲染
<h3> 条件渲染 - 单路分支 </h3>
<p v-if="flag"> A </p>
<h3> 条件渲染 - 双路分支 </h3>
<p v-if="flag"> A </p>
<p v-else> B </p>
<h3> 条件渲染 - 多路分支 </h3>
<p v-if="type === '美食'"> 美食 </p>
<p v-else-if=" type === '游戏' "> 游戏 </p>
<p v-else> 睡觉 </p>
<h3> 条件展示 </h3>
<p v-show=" showFlag "> 条件展示 </p>
new Vue({
el: '#app',
data: {
flag: true,
type: '美食',
showFlag: true
}
})