Vue学习笔记——基础语法

Vue学习笔记——基础语法

目标：

1. 能够说出Vue的基本用法
2. 能够说出Vue的模板语法
3. 能够说出Vue的常用特性
4. 能够基于Vue实现案例效果

---

一些总结：

1. 把字符串渲染到页面上有哪些方式？

• 文档碎片 document.createDocumentFragment
• 利用原生js拼接字符串
• 利用模板引擎拼接
• 利用Vue插值语法
• 利用ES6 `` 反引号拼接字符串

2. v-bind 和 v-on的区别

• v-bind 绑定属性
• v-on 绑定事件

3. 插值表达式中可以放入函数调用
这个函数是有返回值的

4. 关于驼峰命名
在html标签中 使用短横线的方式
首字母都小写，单词之间加上短横线
（DOM元素是不区分大小写的）

---

1. 基本使用

1. 引入vue.js库文件
2. 使用vue的语法做功能
3. 利用vue将数据渲染到页面上

---

2. 模板语法

2.1. 模板

vm = new Vue({
el:'你要挂载在哪里就写那元素，如果是id传入# 类则传. ',
data:{
'存放要渲染到页面上的数据'
},
methods:{
'在这里定义一些函数（方法）'
}
});

---

3. 指令

3.1. 指令是什么？

① 就是一个自定义属性
② Vue 中指令都是以 v- 开头

3.2. 一些指令

2. v-cloak
   防止页面加载时出现闪烁问题
   （因为它一开始是将插值表达式显示上去，然后再快速替换）

背后的原理：先通过样式隐藏内容，，然后在内存中进行值的替换，替换好之后再显示最终的结果。

数据绑定指令：（将数据填充到标签中）

3. v-text
   ① 用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
   ② 如果数据中有HTML标签会将html标签一并输出 (比如 h1没有样式且显示）
   ③ 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

4. v-html
   ① 用法与v-text类似，但是它可以将HTML片段填充到标签中
   ② 可能有安全问题，一般只在可信任内容上使用v-html（本网站，不跨域），永不用在用户提交的内容上

5. v-pre
   当你只想输出‘{{msg}}’这样的字符串时就用这个

6. 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. 双向数据绑定

• 当数据发生变化的时候，视图也发生变化
• 当视图发生变化的时候，数据也会跟着同步变化

1. v-model
   限制在 < input>、< select>、< textarea>、components中使用

需要绑定一个值：

<input type="text" v-model='id'/>

3.4. 事件绑定

1. 语法：v-on
   例如：v-on:click / @click；

2. v-on事件函数中传入参数

① 直接绑定函数名称
那么默认会传递事件对象作为事件函数的第一个参数

 <button v-on:click='handle1'>点击1</button>

②绑定函数调用
那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<button v-on:click='handle1(123，456，$event)'>点击1</button>

3. 事件修饰符

• 可以多个写在一起，但是先后顺序是会有影响的

<!-- 阻止单击事件继续传播(冒泡) -->
<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>

4. 按键修饰符
   如下：

<!-- 只有在 `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" >

5. 自定义按键修饰符
   在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个细节用法

1. 对象绑定和数组绑定可以结合使用

 <div v-bind:class='[activeClass,errorClass,{test: isTest}]'>测试样式</div>

2. 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>

3. 默认的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'">B</div>
<div v-else-if="type==='C'">C</div>
<div v-else>not A/B/C</div>
</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>

注意点：

1. 在自定义指令中 如果以驼峰命名的方式定义 如：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

1. 使用场景：
   模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
2. 定义好的计算机属性如何调用？
   插值表达式中：直接写 自定义的属性名
   方法中： 直接this.自定义的属性名()
3. computed属性 定义 和 data、methods 平级

<div id="app">
<!--
当多次调用 reverseString 的时候
只要里面的 num 值不改变 他会把第一次计算的结果直接返回
直到data 中的num值改变 计算属性才会重新发生计算
-->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<!-- 调用methods中的方法的时候 他每次会重新调用 -->
<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 全家桶