vue基本语法

sizuka
1,372 阅读7分钟

vue基本语法

<div id="app">
	<h3> {{ msg }} </h3>  // {{ data里面定义的变量 }}
</div>

<script src="./lib/vue-2.4.0.js"></script>
    <script>
        new Vue({
            // el 指定要控制的区域
            el: '#app',
            // data 指定要绑定的数据
            data:{
                msg:'123',
                msg2:'<h1>世界，你好！</h1>',
                myTitle:'这是一个自己定义的title',
            },
            methods:{ // 这个methods属性中定义当前vue实例所有可用的方法
                show:function(){
                    alert('Hello World!')
                },
            },
            // 当前被点击的元素身上添加这个类名
            linkActiveClass:'要添加的类名'
        });
    </script>

方法

在Vue中，使用事件绑定机制，为元素指定处理函数的时候如果加了小括号，就可以给函数传参了

<input type="button" value="添加" class="btn btn-primary" @click="btnClick(id)">

当我想要获取这个元素身上的某个值，并根据这个值做出一系列的逻辑处理的时候，可以给这个元素绑定一个变量然后再加(),这个小括号传入参数

vue的指令

注意：在Vue中所有的指令，再调用的时候，都以 v- 开头

v-cloak

主要用于解决插值闪烁问题

<p v-cloak>++++++++++++++ {{msg}} ==========</p>
v-text

和v-clock的作用类似

 <div v-text="msg2"></div>
v-html

将内容当作html进行解析

 <div v-html="msg2"></div>
v-bind

用于绑定属性的指令，v-bind会把 " " 引号里面的内容当作JS代码去执行，把执行的结果输出，所以v-bind中可以写合法的JS表达式

v-bind指令可以被简写成 :

v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定
<input type="button" value="按钮" v-bind:title="myTitle">
<input type="button" value="按钮" :title="myTitle+'我是固定值'">
v-on ==》简写形式：@

用于绑定事件

// 注意：这个show方法，要在vue实例的methods中定义
<input type="button" value="点我" :title="myTitle +'我是固定值'" v-on:click="show">
<input type="button" value="点我" :title="myTitle +'我是固定值'" v-on:mouseover="show">
v-for

渲染数组

 v-for渲染数组：
     1、在标签的属性位置写上 v-for ="item in arr" 
         item表示数组中的每一项，item这个名字可以自己随意命名 
         arr表示需要遍历的数组
     2、在标签的属性位置写上 v-for ="(item,index) in arr"  
     	index表示数组项的索引值   

<p v-for="item in user">{{ item.name }}:{{item.age}}</p>
<p v-for="(item,index) in user">{{item.name}}:{{item.age}}:{{index}}</p>

渲染对象

 v-for 渲染对象：
     1、在标签的属性位置写上 v-for ="value in obj"
         value:表示对象的的值
         obj: 需要遍历的对象    
     2、在标签的属性位置写上 v-for ="(value,key,index) in obj"
         value:表示对象的的值
         key:键
         index:索引
         obj: 需要遍历的对象

 <p v-for="value in boss">{{value}}+{{boss.value}}</p>
 <p v-for="(value,key,index) in boss"> {{key}}:{{value}}:{{index}} </p>

v-for能够根据data中数据的变化自动刷新视图

在控制台，动态的给数组添加数据，并且界面上会显示
vm.user.push({name:'李四',age:'33'})

注意：以下两种情况不会触发视图更新

​ 1、当使用数组的length属性去改变数组的时候，不会触发视图更新

​ 2、使用数组下标的方式去改变数组的时候，也不会触发视图更新

解决方案：

​ 1、使用Vue.set(arr,index,newVal)

​ arr 是需要改变的数组

​ index是数组里面的索引

​ newVal 是要改变的数组的值

Vue.set(vm.user,0,{name:'zs',age:30})

​ 2、Array.prototype.splice()

vm.user.splice(0,1)
从索引为0 的开始删除一项

注意：

v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的哪一项改变的时候，它会只能更新哪一项，好处就是提升性能，注意key的值唯一，不能重复

 <p v-for="item in user" :key="item.name">{{ item.name }}:{{item.age}}</p>
  <p v-for="(item,index) in user" :key="index">{{item.name}}:{{item.age}}:{{index}}</p>
v-for循环中的key
1、v-for循环的时候，key属性只能使用number或者string类型
2、key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
3、:key属性具有唯一性，不能重复，它能够唯一标识数组的每一项
4、将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，

v-if和v-show，v-else

v-if的特点：每次都会删除和创建元素
v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换元素的display:none样式

ref属性(表示对DOM的引用，它的值可以随便取，但是不能重复)

<input type="text" v-model="newId" ref="aaa"> 品牌名称:

页面一加载进来的时候，就执行函数里面的内容
mounted() {
     this.$refs.aaa.focus();
}

Vue指令之事件修饰符

  • .stop 阻止冒泡(从里到外)
  • .prevent 阻止默认事件
  • .capture 事件捕获(从外到里)
  • .self只当事件在该元素本身(比如不是子元素)触发时触发回调
  • .once 事件只触发一次

.self和.stop的区别：

​ .self只会阻止自己身上的冒泡行为，不会阻止其它元素的冒泡

​ .stop会阻止所有元素的冒泡

 .stop阻止事件冒泡 ==》从里到外
 <div class="inner" @click="divHandler">
 	<input type="button" value="戳戳" @click.stop="btnHandler">
 </div>

 .prevent阻止默认行为
 <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>

.capture事件捕获(从外到里)
<div class="inner" @click.capture="divCapture">
	<input type="button" value="戳戳" @click="btnCapture">
</div>

.prevent.once  阻止默认行为的事件只执行一次
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度一下</a>

实现数据的双向绑定

v-model 指令可以实现数据表单元素和Model中数据的双向数据绑定

双向数据绑定==》M《=》V 之间

<input type="text" v-model="msg">

注意：

v-model只能运用在表单元素中

Vue中样式的使用

vue类操作

使用方式一：直接传递一个数组
<h1 :class="['red','italic']">世界，你好！</h1>  // red和italic是上面定义好的类名
方法二：在数组中使用三元表达式
<h1 :class="[flag ? 'red' : '','italic']">世界，你好！</h1> // flag是在数据绑定的时候定义的变量
var vm = new Vue({el:'#app', data:{flag:true},});
方法三：在数组中写一个对象
<h1 :class="[{'red':flag},'italic']">世界，你好！</h1>
方法四：直接使用对象
由于对象的属性可带引号也可不带引号，属性的值是一个标识符
<h1 :class="{red:true,italic:false}">世界，你好！</h1>

vue内联样式

 <h1 :style="{color:'pink','font-size':'20px'}">这是h1标签</h1>

 想让h1即有变量styleObj的样式，也有变量styleObj1的样式
 <h1 :style="[styleObj,styleObj1]">这是h1标签</h1>

过滤器

  1. 过滤器就是用来做数据输出前最后的处理，并没有修改原数据
  2. 可以传入多个过滤器
  3. 全局过滤器就是指所有的VM实例都可以调用这个过滤器
概念
Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化
过滤器可以用在两个地方：
mustachc插值和v-bind表达式
使用方式
过滤器调用时候的格式： {{ name | 过滤器的名称 | 过滤器的名称2 }} 
| 是管道符，
这句话的意思就是，在输出name的值之前，先调用过滤器对name的值进行处理，之后再将处理的结果渲染到这个位置
过滤器的定义语法
function中的第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据
第二个参数可以传参数
Vue.filter('过滤器的名称',function(data){
	return data;
});

定义私有过滤器

  • VM的实例中有一个filters方法，专门用于定义私有过滤器

  • 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器

 filters: { // 定义私有过滤器  过滤器有两个条件[过滤器的名称和处理函数]
                timeFormat:function(time){  // timeFormat过滤器名称
                    var date = new Date(time);
                    var year = date.getFullYear();
                    var month = date.getMonth()+1;
                    var day = date.getDate();
                    return `${year}-${month}-${day}`;
                }
           }

键盘修饰符

Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;

使用自定义按键修饰符

<input type="text" v-model="name" @keyup.f2="add">
// 也可以不封装，直接使用下面的写法
<input type="text" v-model="name" @keyup.113="add">

Vue已经封装好的键盘修饰符：

  • .enter
  • .up
  • .right
  • .left
  • .down

字符串操作

substring(start,end); // 前包后不包 ==》返回截取到的新字符串

str.substring(0,1);  截取从索引0开始截取到索引1，不包括1
str.substring(1);   截取从索引1开始所有的字符

substr(str,[len])；

返回一个从指定位置开始的子字符串

自定义指令

cn.vuejs.org/v2/guide/cu…

Vue.directive(); 定义全局指令

参数1：指令的名称，
参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
{
	el是原生的js对象
// 指令绑定到元素上的时候，会立即执行这个bind函数，(指令绑定到元素身上，但是元素还没有插入到DOM中去)
    bind:function(el){ 
   // 和样式相关的操作，一般都可以在bind中去执行
   	el.style.color='red';
   }，
    inserted:function(el){ // 元素插入到DOM中的时候执行
        和js行为相关的操作，最好在insertd中去执行，防止js行为不生效
    }，
    updated:function(el){ // 当VNode更新的时候，会执行updated,可能会触发多次
        
    }
}

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {  // el表示，我把这个指令绑定到的哪个元素身上，那么el就指的是谁
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

在元素中使用的时候

<input v-focus>

钩子函数

 	el:原生的dom对象
 	binding：用于记录自定义指令的相关信息
 	
 	表示自定义指令插入到标签中的时候就执行
    inserted(el,binding){
      el.focus();
    }
    页面一加载的时候执行
    mounted (el) {
      this.$refs.aaa.focus();
    },

函数的简写形式

不管是bind 还是 update事件被触发，下面的代码都会执行
Vue.directive('color', function (el, binding) {
  el.style.backgroundColor = binding.value
})

// 相当于是下面的写法的简写形式
Vue.directive('color',{
    bind:function(el,bingding){
        el.style.backgroundColor = binding.value
    }
    update:function(el,bingding){
        el.style.backgroundColor = binding.value
    }
});

solt插槽的用法

将父组件的内容放到子组件指定的位置叫做内容分发

父组件
<son-tmp>
    <div>我是父组件里的文字，但是我要被放到子组件里</div>
</son-tmp>
子组件
<template>
  <div>
    <h3>test-slot</h3>
    //父组件里的div会替换掉slot所以这里的123是看不见的
    //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来
    <slot>123</slot> 
  </div> 
</template>
avatar
文章
阅读
粉丝