Vue学习笔记——基础语法
Vue学习笔记——基础语法
目标：
- 能够说出Vue的基本用法
- 能够说出Vue的模板语法
- 能够说出Vue的常用特性
- 能够基于Vue实现案例效果
一些总结：
1. 把字符串渲染到页面上有哪些方式？
- 文档碎片 document.createDocumentFragment
- 利用原生js拼接字符串
- 利用模板引擎拼接
- 利用Vue插值语法
- 利用ES6 `` 反引号拼接字符串
2. v-bind 和 v-on的区别
- v-bind 绑定属性
- v-on 绑定事件
3. 插值表达式中可以放入函数调用
这个函数是有返回值的
4. 关于驼峰命名
在html标签中 使用短横线的方式
首字母都小写，单词之间加上短横线
（DOM元素是不区分大小写的）
1. 基本使用
- 引入vue.js库文件
- 使用vue的语法做功能
- 利用vue将数据渲染到页面上
2. 模板语法
2.1. 模板
vm = new Vue({
el:'你要挂载在哪里就写那元素，如果是id传入# 类则传. ',
data:{
'存放要渲染到页面上的数据'
},
methods:{
'在这里定义一些函数（方法）'
}
});
3. 指令
3.1. 指令是什么？
① 就是一个自定义属性
② Vue 中指令都是以 v- 开头
3.2. 一些指令
- v-cloak
防止页面加载时出现闪烁问题
（因为它一开始是将插值表达式显示上去，然后再快速替换）
背后的原理：先通过样式隐藏内容，，然后在内存中进行值的替换，替换好之后再显示最终的结果。
数据绑定指令：（将数据填充到标签中）
-
v-text
① 用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
② 如果数据中有HTML标签会将html标签一并输出 (比如 h1没有样式且显示）
③ 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值 -
v-html
① 用法与v-text类似，但是它可以将HTML片段填充到标签中
② 可能有安全问题，一般只在可信任内容上使用v-html（本网站，不跨域），永不用在用户提交的内容上 -
v-pre
当你只想输出‘{ {msg}}’这样的字符串时就用这个 -
v-once
执行一次性的插值（当数据改变时，插值处的内容不会继续更新）这样可以提高性能，不需要再监听了
那么怎么使用呢？—— 放到标签里。
<p v-cloak>{
{
msg}}</p>
<p v-html="msg"></p>
<p v-text="msg"></p>
<p v-pre>{
{
msg}}</p>
如何理解响应式：
① h5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）
3.3. 双向数据绑定
- 当数据发生变化的时候，视图也发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
- v-model
限制在 < input>、< select>、< textarea>、components中使用
需要绑定一个值：
<input type="text" v-model='id'/>
3.4. 事件绑定
-
语法：v-on
例如：v-on:click / @click； -
v-on事件函数中传入参数
① 直接绑定函数名称
那么默认会传递事件对象作为事件函数的第一个参数
<button v-on:click='handle1'>点击1</button>
②绑定函数调用
那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
<button v-on:click='handle1(123，456，$event)'>点击1</button>
- 事件修饰符
- 可以多个写在一起，但是先后顺序是会有影响的
<!-- 阻止单击事件继续传播(冒泡) -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
- 按键修饰符
如下：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--当点击enter或者space时 时调用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
- 自定义按键修饰符
在vue中可以通过config.keyCodes 自定义按键修饰符别名
<div id="app">
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config,keyCodes.f5=116;
</script>
3.5. 属性绑定 v-bind
- 用来响应地更新HTML属性
- v-bind:href / :href；
<a v-bind:href='url'>跳转</a>
手动的实现双向数据绑定——v-model的底层实现原理
<input v-bind:value='msg' v-on:input='msg=$event.target.value' type="text">
4. 样式绑定
4.1 class绑定对象的用法
如何绑定一个对象？
- 通过 v-bind:class = { 键：值 }
- 键 代表类名
- 值 为true/false。t-显示 f-不显示
4.2 class绑定数组的用法
如何绑定一个数组？
- 通过 v-bind:class = ’ [ 值1，值2 ] ’
- 值1，值2 对应data中的数据，data中的内容放的是类名（只要名字就可以了，不用 . )
<div v-bind:class='[activeClass,errorClass]'>测试样式div>
<script src="js/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#computor',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
add: function(){
this.sum = this.a + this.b;
}
}
});
script>
4.3 class绑定3个细节用法
- 对象绑定和数组绑定可以结合使用
<div v-bind:class='[activeClass,errorClass,{test: isTest}]'>测试样式</div>
- class绑定的值可以简化操作
<div v-bind:class='arrClasses'>测试样式</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#computor',
data: {
arrClasses: ['active','error'],
objClasses: {
active: true,
error: false
}
},
methods: {
add: function(){
this.sum = this.a + this.b;
}
}
});
</script>
- 默认的class如何处理？默认的class会被保留
4.4 style绑定数组用法
- v-bind:style = ’ [值1， 值2 ] ’
- 数组中的值1 和值2 中存储的是一个对象
这个对象里面存储的 css属性和 属性值
4.5 style绑定对象用法
- v-bind:style = ’ { 键： 值 } ’
- 键 代表 CSS的属性
- 值 中 存贮的是 CSS 属性值
<div v-bind:style='{border: borderStyle, width: widthStyle}'>测试样式</div>
<div v-bind:style='objStyle'>测试样式</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#computor',
data: {
borderStyle: "1px solid blue",
widthStyle: "200px",
objStyle: {
border: "1px solid blue",
width: '100px',
height: '120px'`````````````````````
}
},
methods: {
}
});
</script>
5. 分支结构用法
5.1 v-if使用场景
v-if => v-else-if => v-else
- 多个元素 通过条件判断展示或隐藏某个或多个元素（符合条件的才生成）
- 进行两个视图间的切换
<div id="app">
<div v-if="type=='A'"> A div>
<div v-else-if="type==='B'">Bdiv>
<div v-else-if="type==='C'">Cdiv>
<div v-else>not A/B/Cdiv>
div>
<script>
var vm = new Vue({
el:'#app',
data:{
type:'C'
}
})
script>
5.2 v-show 和 v-if 的区别
- v-show本质就是将标签display设置为none，控制隐藏（已生成好，就是显示不显示的问题）
- v-if 是动态的向DOM树内添加或者删除DOM元素
6. 循环结构
6.1 循环结构遍历数组与key的作用分析
– 数组里面的数值可以是对象，也可以是普通元素
1. 语法：
- v-for =" (item,index) in 数组名 "
- item— 数组中的每一项
- index— 索引
2. key的作用：
- key来给每个节点做一个唯一标识
- key的作用主要是为了高效的更新虚拟DOM
6.2 循环结构遍历对象
1. 语法
- v-for=" (value,name,index) in 对象名 "
- item— 对象中的每一项
- key— 对应的键名
- index— 对应的索引
7. 基础案例——选项卡（tab栏切换）
选项卡案例
Day2
8. Vue 常用特性概览
- 表单操作
- 自定义指令
- 计算属性
- 过滤器
- 监听器
- 生命周期
8.1 表单操作—— v-model
1. 单选框如何实现单选
- 两个单选框需要同时通过v-model 双向绑定 一个值
- 每一个单选框必须要有value属性 且value值不能一样
- 当某个选框选中的时候v-model 会将当前的value值 改变data中的数据
2. 复选框如何实现单选
- 复选框需要同时通过v-model 双向绑定一个值
- 每一个复选框必须要有value属性 且value值不能一样
- 当某一个复选框选中的时候v-model 会将当前的value值改变 data 中的数据
3. 如何实现获取下拉框的选中状态
- 需要给select 通过v-model 双向绑定 一个值
- 每一个option 必须要有value属性 且value 值不能一样
- 当某一个option选中的时候v-model 会将当前的value值 改变 data中的数据
4. 如何获取文本域中的值
通过v-model 绑定一个值
8.1.1 表单域修饰符
.trim自动过滤用户输入的首尾空白字符。 只能去掉首尾的 不能去除中间的空格.lazy将input事件切换成change事件（失去焦点或者按下回车键时才更新）.number转换为数值
8.2 自定义指令基本用法
使用自定义的指令，只需在对用的元素中，加上’v-'的前缀形成类似于内部指令’v-text’的形式。
法一：Vue.directive 注册全局指令
<input type="text" v-focus>
<script>
//注册一个全局自定义指令 v-focus
Vue.directive('指令名称',{
inserted:function(el){
//聚焦元素
el.focus();
}
});
new Vue({
el:'#app'
});
script>
注意点：
- 在自定义指令中 如果以驼峰命名的方式定义 如：Vue.directive(‘focusA’,function(){})
在html中使用的时候，只能通过v-focus-a来使用
Vue.directive 注册全局指令——带参数：
<input type="text" v-color='msg'>
<script>
/*
① bind—— 只调用一次，在指令第一次绑定到元素上时调用（在这里可以进行一次性的初始化设置）
② el——当前自定义指令的DOM元素（你指令放在哪就是哪个元素）
binding——自定义的函数形参，通过自定义属性传递过来的值 存在binding.value 里面
*/
Vue.directive('color',{
bind:function(el,binding){
console.log(binding.value.color);
el.style.backgroundColor = binding.value.color;
}
});
var vm =new Vue({
el:'#app',
data:{
msg:{
color:'blue'
}
}
})
script>
通过自定义属性传递过来的值 存在binding.value 里面，所以msg那可以不用对象，可以直接字符串：msg:‘orange’
法二：注册局部指令
- 局部指令只能在当前组件里面使用
- 当全局指令和局部指令同名时以局部指令为准
<input type="text" v-color='msg'>
<input type="text" v-focus>
<script type="text/javascript">
/*
自定义指令-局部指令
*/
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
//局部指令，需要定义在 directives 的选项
directives: {
color: {
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
},
focus:{
inserted:function(el){
el.focus();
}
}
script>
8.3 计算属性——computed
- 使用场景：
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 - 定义好的计算机属性如何调用？
插值表达式中：直接写 自定义的属性名
方法中： 直接this.自定义的属性名() - computed属性 定义 和 data、methods 平级
<div id="app">
<div>{
{reverseString}}div>
<div>{
{reverseString}}div>
<div>{
{reverseMessage()}}div>
<div>{
{reverseMessage()}}div>
div>
<script type="text/javascript">
/*
计算属性与方法的区别:
① 计算属性是基于依赖进行缓存的，而方法不缓存
② 计算属性使用时，是当成属性使用，而方法是需要调用的
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 100
},
methods: {
reverseMessage: function(){
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
//computed 属性 定义 和 data、methods 平级
computed: {
// reverseString 这个是我们自己定义的名字
reverseString: function(){
console.log('computed')
var total = 0;
// 当data 中的 num 的值改变的时候 reverseString 会自动发生计算
for(var i=0;i<=this.num;i++){
total += i;
}
// 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果
return total;
}
}
});
script>
8.4 侦听器——watch
- 一般用于异步或者开销较大的操作
- watch中的属性 一定是data 中 已经存在的数据
注意： 这里firstName 对应着data 中的 firstName
当 firstName 值 改变的时候 会自动触发 watch
firstName: function(val) {
this.fullName = val + ’ ’ + this.lastName;
}, - watch 属性 定义 和 data 、methods 平级
例子：
<div id="app">
<div>
<span>名：span>
<input type="text" v-model="firstName">
div>
<div>
<span>姓：span>
<input type="text" v-model="lastName">
div>
<div>{
{fullName}}div>
div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
firstName:'',
lastName:'',
fullName:'',
},
watch:{
firstName:function(val){
this.fullName = val +' '+this.lastName;
},
lastName:function(val){
this.fullName = this.firstName + ' '+val;
}
}
})
script>
使用计算属性也可以实现：
<div>{
{allName}}div>
<script>
computed:{
allName:function(){
return this.firstName+ ' '+this.lastName;
}
}
script>
感觉：
监听器监听属性变化，给属性写监听事件，无需调用
计算属性是写好方法给你调用
用户名案例思路：
- 采用侦听器来监测用户名变化
- 调用后台接口进行验证
- 根据验证的结果调整提示信息
<div id="app">
<div>
<span>用户名：span>
<input type="text" v-model.lazy="uName">
<span>{
{tip}}span>
div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
uName:'',
tip:'',
},
methods:{
checkName:function(name){
var that = this;
setTimeout(function(){
if(name=='admin'){
that.tip='用户名已经存在，请更换一个';
}else{
that.tip='用户名可以使用';
}
},2000)
}
},
watch:{
uName:function(val){
this.checkName(val); //可以调用方法嘚
this.tip='正在验证...';
}
}
})
script>
8.5 过滤器 —— hello=>Hello
- Vue.js允许自定义过滤器，可被用于一些常见的文本格式化
- 可用在两个地方：插值表达式 和 v-bind表达式
- 过滤器应该被添加在js表达式的尾部，由“管道”符号指示
- 过滤器不改变真正的data,而只是改变渲染的结果，并返回过滤后的版本
- 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
- 支持联级操作
upper 被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
语法：
Vue.filter(‘过滤器名称’，function(value){
过滤器业务逻辑
})
使用：
< div > { {msg|upper}} < /div >
< div > { {msg|upper|lower}} < /div >
2. 过滤器中传递参数
语法：
Vue.filter(‘过滤器名称’，function(value,arg1,…){
过滤器业务逻辑
})
第二个函数开始去接收传递来的参数，第一个value默认为过滤器传递来的参数（‘不是你放进去的‘）
使用：
< div > { { date | format(‘yyyy-MM-dd’) }} < /div >
案例：格式化日期
调用了一个别人写好的正则日期，不需要自己写了
8.6 生命周期
mounted钩子函数： 这个函数一旦被触发，表示初始化已经完成了，初始化完成以后页面中的模板就已经存在了，就可以向里头填充数据。
插值表达式可以进行一些简单的计算
注意this！
- Learning from vue 全家桶