vue基本指令1.基本使用 2. vue指令指令按照用途不同可以分为六大类：内容渲染指令属性绑定指令事件绑定指令

“这是sylu计算机协会第一次技术征文活动”

1.基本使用

导入vue.js的script的脚本

在页面中声明一个将要被vue所控制的dom区域

创建vm实例对象

<body>
    <div id='app'>
        {{username}}
    </div>
</body>
<script src='引入vue脚本文件'></script>
<script>
const vm = new Vue({
    el:'选择器'，
    data:{
       username:'lq'	
 }
})
</script>

vue数据驱动渲染视图

2. vue指令

指令是vue使前端开发者使用的语法，用于渲染页面的基本结构

指令按照用途不同可以分为六大类：

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

内容渲染指令

内容渲染指令使用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有三种：

v-text

{{}}

v-html

用法：

<p v-text="username"></p>
<p>{{username}}</p>                              //开发中使用最多
<div v-html=""></div>                          //渲染成html

注意：v-text会默认覆盖文本内容，{{}}语法（插值表达式）可以解决这个问题

注意：

如传入选择器为标签只渲染找到的第一个

属性绑定指令

插值表达式不能用在属性节点，只能用在内容节点（不能放在标签内）

v-bind (给属性动态帮定属性值)

<input type="text" v-bind:placeholder="这里写data中想要渲染数据的名字">

**vue规定v-bind：指令可以简写为：

<input type="text" :placeholder="这里写data中想要渲染数据的名字">

使用JavaScript表达式

vue提供模板渲染语法中，支持绑定简单的数据值外还支持JavaScript表达式的运算

<div :id="'list-'+id"></div>          //属性值需要动态拼接时，内部要用单引号隔开
{{message.split('').reverse().join('')}}     //字符串反转

事件绑定指令

v-on指令为DOM绑定事件监听。语法格式如下：

v-on：事件名称=“事件处理函数的名称

简写v-on：==@

在绑定事件时可以加入括号传递数值

原生事件去掉on就是事件名称

<body>
    <div id='app'>
        <p>{{count}}</p>
        <button v-on:click="add">+1</button>
        <button v-on:click="sub">-1</button>
    </div>
</body>
<script src='引入vue脚本文件'></script>
<script>
    //创建vue实例vm
const vm = new Vue({
    el:'app',
    data:{
       count:0	
 },
    //作用时定义事件处理函数
    methods:{
        add:function(){
            //函数内容
            //this访问vm内部的data
            this，count++；
            
        }
        //函数简写
        sub(){
           //和上面同等效果
            this，count--；
    	}
    }
})
</script>

当绑定事件没有传参默认传入事件对象，可对事件对象进行操作，当传入参数之时，事件对象自动覆盖，无法访问。

vue为了寻找事件对象存在内置变量，名字叫$event，这就是原生DOM的事件对象，名字为固定写法

例如add（传入参数，$event）

事件修饰符

preventdefault(); //阻止默认行为

<a href="https://www.baidu.com" @click.prevent="show"></a>        .prevent就是事件修饰符

事件修饰符	说明
.prevent	阻止默认事件（例如a的跳转，表单提交等等）
.stop	阻止事件冒泡（只触发当前点击元素的事件，不会触发父类的事件）
.capture	以捕获模式触发当前事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身是触发事件处理函数

按键修饰符

监听键盘事件之时，我们要进行详细的按键判断。此时加入键盘相关的事件添加按键修饰符

<input @keyup.esc="clear">

.esc

.enter

双向绑定指令

v-model

作用：不操作DOM的前提之下，与表单进行双向数据绑定

与v-bind相比后者只是单向绑定，页面上的数据变化不会改变，数据源（可以理解为单向绑定）

只有表单元素才存在交互，既能呈现数据，才能使用双向绑定指令

input 输入框

type=”radio“

type=”checkbox“

type=‘’xxxx“

textarea

select

<body>    <div id='app'>       <p>          用户的名字是：{{username}}        </p>       	//绑定之后修改input的值p也要变化        <input type="text" v-model="username">    </div></body><script src='引入vue脚本文件'></script><script>const vm = new Vue({    el:'#app'，    data:{       username:'lq'	 }})</script>

v-model指令的修饰符

为了方便对用户输入的内容进行修饰

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	`<input type="text" v-model.number="age">`
.trim	自动过滤用户的输入的首位空白字符	`<input type="text" v-model.trim="username">`
.lazy	在”change“是而非”input“是更新	`<input type="text" v-model.lazy="username">`

条件渲染指令

条件渲染指令是用来控制DOM的显示和隐藏

v-if //动态创建或移除元素，实现元素的显示和隐藏

v-show //动态为元素添加或者移除display:none样式，来实现元素的显示和隐藏

如果频繁切换元素的显示状态，用v-show性能会比较好

如果初始状态不被展示，在特殊情况才需要展示，就用v-if

实际开发过程中，不用考虑性能问题，直接用v-if

列表渲染指令

v-for

item in items 形式特殊的语法

items是待循环数组

item是被循环数组内部的每一项

data:{
	list:[
	{id:1,name:'zs'},
	{id:2,name:'ls'},
]
}
<hr>
<ul>
    <li v-for="item in list">{{item.name</li>
</ul>

v-for中的索引

v-for还存在第二个可选参数，即当前项的索引。（俗称角标）

语法格式:(item,index) in item

注意：

v-for指令中的item项和index索引都是形参，可以根据需要重新命名。

一但用到v-for指令就一定要绑定一个:key属性，尽量以id值命名（当在html文件中如果不绑定不会报错，但是如果使用的是vue文件的话会直接报错无法使用）

key属性的值必须是字符串或者数字类型

key的值不可重复，否则终端报错 Duolicate keys detected

使用index的值当作key的值没有任何意义

                                            第一节END
                                            持续更新中。。。。