01 vue 基础（指令）

vue官网

https://cn.vuejs.org/

一、什么是 MVVM

M — model 数据（提供）
V — view 界面 / 模板（提供）
VM — viewModel 连接模板和数据（自动的处理数据和模板之间的关系）

二、实例基本选项 & 引入vue

const app= new Vue({el: "#app",     // el选项用来把当前实例挂载到 dom元素上data: {         // 提供实例模板需要的数据},methods: {      // 提供实例和模板需要的方法}
})

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三、关键词

绑定：订阅数据的变化，不能改变数据
双向数据绑定：订阅数据的变化，并且可以更改数据

四、数据的获取（this & 对象名称）

1. 在对象内部使用本对象的数据

this.username

    const vm = new Vue({el: "#app",data: {username: "宫鑫"},methods: {move: function(){// 读取alert( this.username );}}})

2. 在对象外部使用对象中的数据

vm.username

    const vm = new Vue({el: "#app",data: {username: "宫鑫"}})// 读取var user = vm.username;

五、vue指令

vue 指令集列表

指令名称	作用	备注
v-model	表单数据双向绑定
v-for	循环
v-show	显示与隐藏	不会从dom移除元素，是display:none；虽然隐藏，但是元素是被创建好的依然会消耗dom性能
v-if	显示与隐藏	从 dom 中移除元素；没有该元素，不会消耗性能；
v-else-if
v-else
v-bind	给html属性绑定数据
v-on	事件绑定
v-text	类似于 `el.innerText`	和插值表达式{{}} 表现一致
v-html	类似于 `el.innerHtml`

1. 插值表达式

{{ username }}

    <div id="app">{{username}}</div>

     new vue({el: "#app",data: {username: "宫鑫"}})

2. v-model 指令

双向数据绑定，只能在表单上使用

<h1>{{username}}</h1>
<input type="text" v-model="username">

data: {username: "宫鑫"
}

3. v-for 指令

简介

循环数组或对象
v-for指令和 for in & for of 相似，尤其和 for of 类似

使用

<div v-for="item in items"></div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

示例

<li v-for="(item,index) in users">下标：{{index}}<br />姓名：{{item.name}}<br />年龄：{{item.age}}
</li>

data: {users: [{ name: "张三", age: "35" },{ name: "李四", age: "35" },{ name: "王五", age: "35" }]
}

拓展
看一下 js 中的 for in 和 for of

    let arr = ["张三", "李四", "王五", "赵六"];let obj = {name:"张三",age: "22",sex: "男"}// for in 循环的是 数组下标 或 对象键名for(index in arr){console.log(index);// 0 1 2 3}for(index in obj){console.log(index);// name age sex}// for of 循环的是 数组项 但是不能循环对象，因为对象中没有遍历接口for(item of arr){console.log(item);// 张三 李四 王五 赵六}

4. v-show 指令

简介

通过表达式的真假来控制 display属性

示例

<div v-show="onOff">{{onOff}}
</div>

data: {onOff: true
}

5. v-if 指令

简介

根据表达式的值的真假条件决定是否渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

示例

<div v-if="onOff">{{onOff}}
</div>

data: {onOff: true
}

拓展
v-if 和 v-show 的比较

v-if 和 v-show 的比较：
v-show :

通过 display:none 来隐藏数据

缺点：如果数据太多的话，比如说10w条要显示10条，v-show虽然隐藏，但是元素被创建出来了，依然会消耗 dom 性能；

优点：频繁切换隐藏和显示状态的话，只是修改 display属性，比较快捷

v-if :

通过移除dom节点来隐藏数据

优点：如果有很多数据需要隐藏的话，使用v-if的话，在dom中直接没有该元素，不会消耗性能；

缺点：频繁切换隐藏和显示状态的话，如果要显示，dom需要重新创建，会消耗一定的性能；

总结：
1. 如果一个元素会频繁的隐藏与显示，选择 v-show；
2. 如果从优化性能的方面来考虑，就选择 v-if；

6. v-bind 指令

缩写： :
用法

直接在 html 的结构上绑定vue数据是无效的，这时候就要使用 v-bind属性了

示例

<div v-bind:class="style"> v-bind指令的使用 </div>

data: {style: "wraper"
}

v-bind:class 和 v-bind:style 不只能绑定字符串，还能绑定数组和对象

拓展一： v-bind:class

优点：切换性能更高
缺点： css样式要事先预设好

绑定对象

{ key : value}
key ：样式的名称
val ：布尔值 — 来决定这个样式是否生效

.wraper{background:rgb(0, 46, 131);line-height: 160px;
}
.font{color: #fff;font-size: 24px;text-align: center;
}

<div v-bind:class="{wraper: true,font: true
}">v-bind:class 绑定对象
</div>

绑定数组

.wraper{background:rgb(0, 46, 131);line-height: 160px;
}
.font{color: #fff;font-size: 24px;text-align: center;
}

<!-- 1.当数组中是字符串时，class直接生效 -->
<div v-bind:class="['wraper', 'font']">v-bind:class 绑定对象
</div><!-- 2.当数组中是对象时，判断值是否是true，是的话生效 -->
<div v-bind:class="[
'wraper',
{ font: true }
]">v-bind:class 绑定对象
</div>

拓展二： v-bind:style

优点： css样式不用预设，直接给值
缺点：相对 v-bind:class 来说，性能差一些

绑定对象

<!-- 注意：不能写 background-color 可以写成 'background-color' or backgroundColor（加引号或者是小驼峰命名是可以的）
-->
<div v-bind:style="{    backgroundColor: 'red',
    color: '#fff',
    padding: '20px 0',
    borderRadius: '10px',
    textAlign:'center'
}"
>v-bind:style  绑定对象</div>

绑定数组

<div v-bind:style="[style01, style02]">v-bind:style 绑定数组
</div>

data: {style01: {backgroundColor: 'red',padding: '20px 0',borderRadius: '10px'},style02: {color: '#fff',fontSize: '20px',textAlign: 'center'},
}

7. v-on 指令

缩写：@
简介

事件的监听

示例

<button v-on:click="fn">点击事件</button>

methods: {fn: function(){console.log("触发了点击事件");}
}

示例二（事件对象）

无参时，直接通过 event 来获取

<button v-on:click="fn">点击事件</button>

fn: function(){console.log(event);
}

有参时，通过 $event 传递事件对象

<button v-on:click="fn('宫鑫', $event)">点击事件</button>

fn: function (name, ev) {console.log(name, ev);
}

8. v-text 指令

简介

类似于 {{}} 插值表达式，都是将数据插入到 dom 结构中
不过与插值表达式不同的是插值表达式可以多个一起使用，而 v-text 却只能单独使用

示例

<div v-text="title"></div>

data: {title: "宫鑫"
}

9. v-html 指令

简介

更新元素的 innerHTML
如果数据是 HTML 结构，插入到页面中只是普通的字符串，并不会编译成 html 结构，这时候就需要使用 v-html指令了

示例

<textarea v-model="msg" cols="30" rows="10"></textarea>
<div v-html="msg"></div>

data: {msg: ""
}

注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

01 vue 基础（指令）相关推荐

vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
vue基础指令if和show的区别
v-if指令 (1)作用: 根据条件渲染数据 (2)语法: 单分支: v-if="条件语句" ...
【vue】1、vue介绍及vue基础指令
1.VUE介绍数据驱动视图:vue监听数据的改变,自动渲染界面,无需操作DOM. 双向数据绑定:数据源和界面上的数据保持一致,改变其中一个另一个也会发生改变. MVVM是实现vue数据驱动视图和数据 ...
vue学习资料：vue笔记ppt整理(vue基础指令vue基础语法)
vuejs基础语法:
vue基础指令的学习
vue快速复制快捷键_vue快捷键与基础指令详解
v-bind可以简写成 : → v-on:click可以写成@click v-if实例可以通过对对象操作条件来实现想要展示的效果现在你看到我了天气炎热 new Vue({ el: &quo ...
【Vue】v- xxx 基础指令
文章目录 v- xxx 基础指令 1.v-text 文本指令 2.v-html 标签指令 3.v-on 事件指令实战:计数器补充 4.v-show 图片指令 5.v-if 条件指令 6.v-bin ...

01 vue 基础（指令）

vue官网

一、什么是 MVVM

二、实例基本选项 & 引入vue

三、关键词

四、数据的获取（this & 对象名称）

1. 在对象内部使用本对象的数据

2. 在对象外部使用对象中的数据

五、vue指令

1. 插值表达式

2. v-model 指令

3. v-for 指令

4. v-show 指令

5. v-if 指令

6. v-bind 指令

7. v-on 指令

8. v-text 指令

9. v-html 指令

01 vue 基础（指令）相关推荐

最新文章

热门文章