vue语法规则_vue基本语法

vue基本语法

{{ msg }}

// {{ data里面定义的变量 }}

new Vue({

// el 指定要控制的区域

el: '#app',

// data 指定要绑定的数据

data:{

msg:'123',

msg2:'

世界，你好！

',

myTitle:'这是一个自己定义的title',

},

methods:{ // 这个methods属性中定义当前vue实例所有可用的方法

show:function(){

alert('Hello World!')

},

},

// 当前被点击的元素身上添加这个类名

linkActiveClass:'要添加的类名'

});

复制代码

方法

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

复制代码

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

vue的指令

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

v-cloak

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

++++++++++++++ {{msg}} ==========

复制代码

v-text

和v-clock的作用类似

复制代码

v-html

将内容当作html进行解析

复制代码

v-bind

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

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

v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定

复制代码

v-on ==》简写形式：@

用于绑定事件

// 注意：这个show方法，要在vue实例的methods中定义

复制代码

v-for

渲染数组

v-for渲染数组：

1、在标签的属性位置写上 v-for ="item in arr"

item表示数组中的每一项，item这个名字可以自己随意命名

arr表示需要遍历的数组

2、在标签的属性位置写上 v-for ="(item,index) in arr"

index表示数组项的索引值

复制代码

{{ item.name }}:{{item.age}}

{{item.name}}:{{item.age}}:{{index}}

复制代码

渲染对象

v-for 渲染对象：

1、在标签的属性位置写上 v-for ="value in obj"

value:表示对象的的值

obj: 需要遍历的对象

2、在标签的属性位置写上 v-for ="(value,key,index) in obj"

value:表示对象的的值

key:键

index:索引

obj: 需要遍历的对象

复制代码

{{value}}+{{boss.value}}

{{key}}:{{value}}:{{index}}

复制代码

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的值唯一，不能重复

复制代码

{{ item.name }}:{{item.age}}

{{item.name}}:{{item.age}}:{{index}}

复制代码

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的引用，它的值可以随便取，但是不能重复)

品牌名称:

页面一加载进来的时候，就执行函数里面的内容

mounted() {

this.$refs.aaa.focus();

}

复制代码

Vue指令之事件修饰符

.stop 阻止冒泡(从里到外)

.prevent 阻止默认事件

.capture 事件捕获(从外到里)

.self只当事件在该元素本身(比如不是子元素)触发时触发回调

.once 事件只触发一次

.self和.stop的区别：

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

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

.stop阻止事件冒泡 ==》从里到外

复制代码.prevent阻止默认行为

百度一下

复制代码.capture事件捕获(从外到里)

复制代码.prevent.once 阻止默认行为的事件只执行一次

百度一下

复制代码

实现数据的双向绑定

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

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

复制代码

注意：

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

复制代码

Vue中样式的使用

vue类操作

使用方式一：直接传递一个数组

世界，你好！

// red和italic是上面定义好的类名

复制代码

方法二：在数组中使用三元表达式

世界，你好！

// flag是在数据绑定的时候定义的变量

var vm = new Vue({el:'#app', data:{flag:true},});

复制代码

方法三：在数组中写一个对象

世界，你好！

复制代码

方法四：直接使用对象

由于对象的属性可带引号也可不带引号，属性的值是一个标识符

世界，你好！

复制代码

vue内联样式

这是h1标签

复制代码想让h1即有变量styleObj的样式，也有变量styleObj1的样式

这是h1标签

复制代码

过滤器

过滤器就是用来做数据输出前最后的处理，并没有修改原数据

可以传入多个过滤器

全局过滤器就是指所有的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;

复制代码

使用自定义按键修饰符

// 也可以不封装，直接使用下面的写法

复制代码

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

.enter

.up

.right

.left

.down

字符串操作

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

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

str.substring(1); 截取从索引1开始所有的字符

复制代码

substr(str,[len])；

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

复制代码

自定义指令

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()

}

}

}

复制代码

在元素中使用的时候

复制代码

钩子函数

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插槽的用法

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

父组件

我是父组件里的文字，但是我要被放到子组件里

复制代码

子组件

test-slot

//父组件里的div会替换掉slot所以这里的123是看不见的

//如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来

123

复制代码