Vue.js入门

喜欢ヅ旅行 2022-04-02 08:12 217阅读 0赞

### 指令 ###

使用’\{ \{\}\}‘访问vue实例里data内的数据，’\{ \{\}\}'称之为插值表达式，此方式访问数据会有数据闪烁的问题。

*  v-text:作用与’\{ \{\}\}'插值表达式类似，只是v-text会将html内容覆盖，v-text可以做类似的表达式计算，前提是i是数字，v-text=“i+1”
 *  v-cloak:解决能够解决插值表达式闪烁的问题
 *  v-html:可以把数据当作html内容解析，且也会覆盖绑定html元素的内容。
 *  v-bind:是用来绑定属性的，可以简写为冒号’:’

<input type="button"  value="按钮" v-bind:title="title+'哈哈'">
    	可简写为：
    	<input type="button"  value="按钮" :title="title+'哈哈'">
    	可以看到 引号里面也是可以写表达式的。

*  v-on:类似于onclick事件 v-on:click="myEvent()"可以简写为：@click=“myEvent()”

v-on指令的事件修饰符:
    a) .stop 阻止冒泡
    b) .prevent 阻止浏览器的默认事件
    c) .capture 添加事件监听器时使用事件捕获模式
    d) .self 当事件在该元素本身触发时 触发回调
    e) .once 事件只触发一次

*  v-model:实现双向数据绑定事件，注意：v-model只能运用在表单元素上（input select checkbox textarea）
 *  v-for:迭代元素 注意：使用v-for循环的时候一定要加给绑定key属性,key属性绑定的值只能时string或number类型

v-for是用来做迭代的，有如下几种用法
    a) 迭代数组
    b) 迭代对象
    c) 迭代数组对象 
    	<h6 v-for="(array,i) in list">{
       {array}}----->{
       {i}}</h6>   list:[1,2,3,4]
    	<h6 v-for="(obj,i) in objList">{
       {obj.id}}----->{
       {obj.name}}---->{
       {i}}</h6> objList:[{id:1,name:'dsx'},{id:2,name:'dsx2'}]
    	<h6 v-for="(val,key,i) in obj">{
       {val}}---->{
       {key}}---->{
       {i}}</h6>   obj:{name:'dsx',age:12,sex:'男'}
    	<h6 v-for="x in 20">{
       {x}}</h6>  //循环数字

*  v-if: 表达式为true则显示元素
 *  v-show: 与v-if效果类似，但性能有差异

//如果某点击事件方法里只有一句话，则可以使用如下方式：@click="flag=!flag"   取反切换
    	<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
    	<h3 v-if="flag">这是v-if控制的元素</h3>
    	<h3 v-show="flag">这是v-show控制的元素</h3>

### 数组的遍历 ###

*  使用for遍历 :原始方式
 *  使用array.forEach遍历 注意：这种方式无法强制终止循环,参数是一个函数，类似java的lambda表达式

this.a.forEach( item => {
    	if(item.title.indexOf(keyword)!=-1){
    	array.push(item); 
    					}
    				})

*  使用array.filter过滤 会返回一个新的数组

return this.a.filter( obj => {
    	if(obj.title.indexOf(keyword)!=-1){
    		return obj;
    						}
    					})

*  使用array.some方式

this.a.some( obj => {
    	if(obj.title.indexOf(keyword)!=-1){
    	array.push(obj);
    		}
    			})

### vue中的全局过滤器 ###

vue中的过滤器是用来做数据格式化的

*  语法： Vue.filter(‘过滤器名称’，function(data)\{\}) 参数function里的参数只能是管道前面的数据，  
    也即下面例子中的msg。**function可以有多个参数**, 过滤器也是进行链式调用
 *  使用 可以在插值表达式和v-bind指令中用管道的方式使用 eg:\{ \{ msg | Myfilter \}\}

<h3 :class="['red','big',{'active':flag}]">{
       { b | myFilter('zz','cj')}}</h3>
    Vue.filter('myFilter',function(data){
    	return data+'  邓绍祥';
    })

### 使用vue中的全局过滤器做日期格式化 ###

Vue.filter('dateFomat',function(dateString,pattern=''){		//pattern=''表示默认时为'',
    	var date =new Date(dateString);
    	var y=date.getFullYear();
    	var m=date.getMonth()+1;//月份从零开始的
    	var d=date.getDate();
    	if(pattern.toLowerCase() === 'yyyy-mm-dd'){
    		return `${y}-${m}-${d}`;
    	}else{
    		var hh=date.getHours();
    		var mm=date.getMinutes();
    		var ss=date.getSeconds();
    		return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    	}
    })