入门：Vue六大常用内置指令

指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构

所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中

只能渲染纯文本内容， 会覆盖 标签内部原本的内容

只能渲染纯文本内容， 不会覆盖 标签内部原本的内容

能将带标签的字符串渲染成html内容， 会覆盖 标签内部原本的内容

为元素的属性 动态 绑定属性值

注意： 插值表达式 和 v-bind 还支持javascript表达式的运算

为元素绑定事件

只要是事件，就能使用的修饰符，以下列举5个常用的

只能在触发键盘事件时，使用的修饰符，以下列举2个常用的

快速获取表单数据（只应用于表单元素，如：input、textarea、select）

只能给v-model使用的修饰符

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

配合 v-if 指令一起使用，否则将不会被识别

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

注意：在vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

作者：用户2031777005900

链接：>

比如：

<ul>

    <li v-for="item in list" @click="clickEvent($event)">{{itemname}}</li>

</ul>export default {

    data () {

      return {

        list:[{name: 'aaa'}, {name: 'bbb'}]

        }

  },

  methods: {

      clickEvent(e){

          // etarget就是你当前点击的dom元素 

      }

  }  

}

Vue:渐进式javascript框架

声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建

Vue的基本使用

Vue的两种挂载方式:

模板语法:

1插值表达式

存在闪动问题:快速刷新浏览器时,有时会显示{{xxx}}内容,然后替换为要显示的值解决的办法-->指令(先隐藏,替换好值之后再显示)

2指令(指令的本身就是自定义属性)

以v-开头 例如v-cloak

html:

js

效果:

使用v-cloak

html:

css:

效果:

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2MVVM私享

M(model)

V(view)

VM(view-model)

mvc,mvp和mvvm的区别:

>

vue @clicknative 原生点击事件：

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用native修饰符）

2，等同于在子组件中：

子组件内部处理click事件然后向外发送click事件：$emit("click"fn)

Buttondemo组件

一、Button组件根元素是button

当我们点击Buttondemo组件click事件时候，正常情况下，点击完就会将事件传入到Button组件中根元素button上。这时我们点击打印出“hi”

但是如果Button组件根元素不是button，而是div时候，这个时候事件是传入div上，而不是button元素上。

二、Button组件根元素是div

当我们点击Buttondemo组件click事件时候，点击完就会将事件传入到Button组件中根元素div上，这时只要我们点击这个div边框之内都能触发click事件。

三、如何让根元素div里面button触发click事件，

（1）、首先让div不要继承click属性: inheritAttrs:false

（2）、让div里的button绑定事件: v-bind=$attrs $attrs是指所有事件

四、当有多个事件属性传入，如何自主放置在不同元素进行触发

（1）、利用contextattrs获取所有属性

（2）、利用ES6析构函数{size,focus,mouseover,click}=contextattrs

（3）、再在不同元素上绑定上面size或focus等

Buttondemo组件

Button组件

用v-on指令或者@监听DOM事件，并在触发时运行一些JavaScript代码；

参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定

Vue中的事件修饰符：

1、prevent：阻止默认事件（常用）；

2、stop：阻止事件冒泡（常用）；

3、once：事件只触发一次（常用）；

4、capture：使用事件的捕获模式；

5、self：只有eventtarget是当前 *** 作的元素时才触发事件；

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

Vue中常用的按键别名：

回车 => enter、删除 => delete (捕获“删除”和“退格”键)、退出 => esc、空格 => space、换行 => tab (特殊，必须配合keydown去使用)、上 => up、下 => down、左 => left、右 => right等。

代码案例

模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。

代码案例

通过watch来响应数据的变化。

代码案例

class样式，写法:class="xxx" ，其中xxx可以是字符串、对象、数组。

1、字符串写法适用于：类名不确定，要动态获取。

2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式，写法：:style="{fontSize: xxx}"，其中xxx是动态值；:style="[a,b]"其中a、b是样式对象。

代码案例

以上就是关于入门：Vue六大常用内置指令全部的内容，包括:入门：Vue六大常用内置指令、vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素、Vue基本用法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！