知识点
- 双大括号语法
- this._data.msg
- this.$data.msg
- this.msg
- msg
- _ / $ / # 这三种形式都是内部私有属性的一种标识,不希望外用
模板语法
mustache语法是支持写js的
- 用法:
- 内容:必须加{{js语法}}
- 属性:属性中属性值可以直接写js语法,并且属性值中的数据相当于全局变量
- 给一个标签加一个自定义属性/已有属性
img中的src就是已有属性 <img src = ""/> //data-index就是自定义属性,web网页中建议我们使用data-形式来定义自定义属性 <img data-index = "0"/>
- 思考:Vue现在想要在html中使用自己的属性,并且要和它的语法和数据结合?
- 咋整?
- 分析:如果我能够标识出哪一个属性是具有vue标志的那就好了,属性前加v
- Vue给这种带v标识的属性,起了一个名字:指令【借鉴angular】
<div v-html = "msg"> </div> ```
- 研究它js的支持性
- 数据类型
- 市场上js的数据类型分类有两种?
- 第一种
- 初始数据类型:number、boolean、string、null、undefine
- 引用数据类型:object[function array…]
- 第二种
- 基础数据类型:number string boolean
- 特殊数据类型:null undefine
- 复杂数据类型:Object[function array…]
- 第一种
- 市场上js的数据类型分类有两种?
- 输出语法
- console
- alert
- 表达式/运算符
- 三元表达式
- 数据类型
- 总结
- null和undefined是不会显示的,其他数据类型都是支持的的,可以显示的
- 挂载在window身上的全局属性,我们都不能用的:比如:console、alert
- {{}}不写流程控制
- for
- if
- while
- do…while
- {{}}支持三元表达式,同样也支持运算符
- 短路原则也是支持的
指令
指令的目的是做什么:操作DOM
解释:MVVM vm->v 数据驱动
所以:今天开始,我们不像二阶段一样操作dom,改成操作数据,数据要想操控DOM,那么我们需要依赖指令,因为指令是直接绑定在dom身上的
- v-html:转义输出,也就是可以解析xml数据
- v-text:非转义输出,也就是无法解析xml类型数据
- v-bind
- 将数据和属性进行单向数据绑定:将vue中数据赋值给属性值
<img v-bind:src = "src"/> <div v-bind:class = ""> </div> <div v-bind:style = ""> </div>
- 简写形式
<img v-bind:src = "src"/> <img :src = "src"/>
- 类名绑定
- 用法
对象形式用法
数组形式用法<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>
- 用法
- 样式绑定
- 用法
对象形式用法
数组形式用法<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p> <p :style = "styleObj"></p>
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p> <p :style = "[size,bg]"></p>
- 用法
- 将数据和属性进行单向数据绑定:将vue中数据赋值给属性值
条件渲染
- v-if
- v-else-if
- v-else
- v-show条件展示
<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>
- 思考总结
思考: v-if vs v-show
1. 效果看起来一样
2. why Vue要出两个相似的指令?
v-if控制的是元素的存在与否
v-show控制的是元素的display:none属性
思考? 如果出事条件为假时? v-if v-show 谁的性能损耗较高?
v-show
总结: 项目中如何选择哪一个?
频繁切换用 v-show
如果不是很频繁的切换,那我们用 v-if
列表渲染
v-for指令
<h3> 数组 </h3>
<ul>
<li v-for="(item,index) in arr" :key=" index ">
{{ item }} -- index{{ index }}
</li>
</ul>
<h3> 对象 </h3>
<ul>
<li v-for="(item,key,index) of obj" :key="index">
{{ item }} -- {{ key }} -- {{ index }}
</li>
</ul>
<h3> json </h3>
<ul>
<li v-for="item in json" :key="item.id">
<span> 商品名称: {{ item.shop_name }} </span>
<span> 商品价格: {{ item.price }} </span>
</li>
</ul>
<h3> 循环嵌套 </h3>
<ul>
<li v-for="item in lists" :key="item.id">
<h3> 商品类型: {{ item.shop_name }} </h3>
<ul>
<li v-for="item in item.type" :key="item.id">
<p> 制造商: {{ item.maker }} </p>
</li>
<!-- <li v-for = "ele in item.type" :key = "ele.id">
<p> 制造商: {{ ele.maker }} </p>
</li> -->
</ul>
</li>
</ul>
<h3> 循环number / string </h3>
<p v-for="item in 10"> {{ item }} </p>
<p v-for="item in 'abc'"> {{ item }} </p>
总结:
- 列表渲染参数可以写三个,分别是item key index
- 列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识,
- 思考:这是为什么?
- 这个key最好是id,因为id唯一?思考:为什么不能是index
- 循环嵌套式,参数名字可以式一致的
- in/of都可以使用
事件处理器
<button onclick = "alertHandler()"> 点击 </button>
js中事件添加
DOM 一级事件 on
1. on添加事件只写书写一次
DOM 二级事件 事件监听
1. 可以有多个
2. 事件监听有兼容 【 现代浏览器 / IE低版本 】
addEventListener
attachEvent
事件包含部分
事件源: box
事件类型: click
事件处理程序: function () {}
box.onclick = function () {}
事件执行形式有两种
1. js执行
2. html中执行
通过上面的案例,告诉你: Vue选择了第二种作为事件添加的形式
- v-on指令 简写可以是@
事件:
事件对象: 事件对象记录了整个事件的信息
事件参数
形式参数: 定义函数/方法时的参数
实际参数: 调用函数/方法时传入的参数
注意: 当一个事件处理程序中有多个参数,其中一个参数是事件对象式,我们在调用这个方法时,要添加一个实际参数 $event 与之对应
<button @click = 'fn'> 点击 </button>
<button @click = "eventHandler"> 事件对象 </button>
<button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>
- 事件修饰符
<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">
Vue中对事件的功能的扩展
* 修饰符 - 修饰事件
* 按键修饰符
- stop
- self
- once
- ...
* 键盘修饰符
2. 自定义按键修饰符
Vue.config.keyCodes.f1 = 112
1. 先以一个案例的形式来讲述一下这个修饰符的好处
- 事件冒泡
- 回车弹出input的value