一篇笔记带你轻松打开vue的大门vue是什么: 基本概念:vue是一个渐进式的javascript框架 vue的特点:

vue是什么:

基本概念:vue是一个渐进式的javascript框架

vue的特点:

渐进式
数据驱动视图 (响应式)
组件系统

直接上干货:

vue中的指令:

(1)v-for

语法:
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
举例:
<p v-for="(item,index) in arr" :key = "index"></p>

注意:
item:循环变量,用来指向当前的数组元素
index:下标(索引值)
key: 只能在一个循环过程中的唯一值

(2)v-bind

作用: v-bind用来动态绑定标签上的属性的值
语法:
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
简写:
<元素 :属性名1="值1" :属性名2="值2"></元素>

(3)v-text和v-html

语法:
v-text="vue数据变量"
v-html="vue数据变量"
特点:
v-text把值当成普通字符串显示, v-text ===> innerText
v-html把值当做html解析,v-html ===> innerHTML

(4)v-if和v-show

作用:
控制标签的可见与不可见
语法:
<元素 v-if="vue变量">111</元素>
<元素 v-show="vue变量">222</元素>
如果vue变量的值为true，就可见，否则就不可见。
原理:

v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上添加或移除
小结:
v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
注意无论变量是否为true还是false,它一定会创建元素的。
v-if 会动态创建和删除元素。
在频繁的切换可见与不可见时，它的效率会低一点
如果变量的值为false,它将不会创建元素

(5)v-if和v-else-if和else

与js中if-else一致

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

(6)v-on

作用:给标签绑定事件语法:

<标签 v-on:事件名="要执行的少量代码" >
<标签 v-on:事件名="methods中的函数" >
<标签 v-on:事件名="methods中的函数(实参)">
注意:可简写为如:

<标签 @click="methods中的函数">
事件名可以是任意合法的DOM事件

(7)vue配置项 methods

 export default {
 methods: {
   函数1: function(){
   },
   函数2(){
   }
}

(8)v-model 双向绑定

语法:- <标签 v-model>
限制 :

<input>
<select>
<textarea> 作用 :
双向绑定:数据变化->视图自动同步;视图变化->数据自动同步
代码如下:

<div>
用户名 : <input type="text" placeholder="请输入用户名" v-model="uname"> <br>
密码 : <input type="text" placeholder="请输入密码" v-model="password">
<button>登录</button>
</div>

export default {
        data(){
        return {
        uname : "",
        password:""
}}
}

一篇笔记带你轻松打开vue的大门