Vue基础指令集锦
v-model双向绑定数据
<input type="text" v-model="msg"> {{msg}}
###v-on 事件
<div id="box">
<button v-on:click="say">按钮</button>
<button @click="say">按钮</button>
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
v-html 能读取html标签
<div id="box">
<div v-html="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"<h1>121212</h1>"
}
},
methods: {
say() {
}
}
})
</script>
v-class 类名
<style>
.red {
background: red;
}
.blue {
width: 100px;
height: 100px;
background: blue;
}
</style>
<div id="box">
<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元运算符方式-->
<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {
isred:false
}
}
})
</script>
v-text读取文本不能读取html标签
<div id="box">
<div v-text="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"11111"
}
},
methods: {
say() {
alert(111);
}
}
})
</script>
v-show 显示与隐藏
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-if显示与隐藏 (dom元素的删除添加 个人理解)
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-else
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-else-if
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-bind
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">点击</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>
v-on 事件
<div id="box">
<!-- v-on -->
<button v-on:click="say">按钮</button>
<!--<button @click="say">按钮</button>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
v-once执行一次事件
<div id="box">
<div v-once>{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data(){
return{
msg:"qwdqwdqwd"
}
}
})
</script>
v-cloak防闪烁
<div id="box">
<div v-cloak="">欢迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
v-pre 把标签内部的元素原位输出
<div id="box">
<div v-pre>欢迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
总结
Vue简介
特点: mvvm m=mvc module 模型 v=view 视图 c=controller 控制器
mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递)
vue1 双向数据绑定 vue2 单向数据流
单页面应用
v-model 数据绑定
data 返回对象用 return
v-for 循环 格式 v-for="字段名 in(of) 数组json"
v-show 显示 隐藏 传递的值为布尔值 true false 默认为false
v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用: 及时对页面的数据进行更改
v-on 绑定事件 函数必须写在methods里面
@click 快捷方法
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出
原文地址:https://segmentfault.com/a/1190000016779036
Vue基础指令集锦的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- Vue 基础指令学习
学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...
- 1 --- Vue 基础指令
1.vue 指令 1.v-model 主要在表单中使用,文本框.teaxare.单选.下拉 等 2.v-text 文本渲染 类似{{}} 3.v-show 控制Dom显示隐藏 displ ...
- Vue --- 基础指令
目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...
- vue基础指令了解补充及组件介绍
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
- vue基础指令了解
Vue了解 """ vue框架 vue是前台框架:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式. ...
- vue基础指令学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue基础指令
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
随机推荐
- css绘制各种形状
代码:http://runjs.cn/code/9lyjtbxl: 效果:http://sandbox.runjs.cn/show/9lyjtbxl <!DOCTYPE html> < ...
- shell中括号总结: {}, (), (()), [], [[]]
括号总结 () 单小括号 命令组,括号中的命令将会开一个新的子shell执行 括号中变量不能被剩下脚本使用 命令之间分号隔开 命令和括号之间可以没有空格 命令替换,等同于``反引号 $(xxx)会被替 ...
- Jmeter4.0----录制脚本(4)
1.前言 Jmeter录制脚本有两种方式.1.通过第三方工具录制比如:Badboy,然后转化为jmeter可用的脚本:2.使用jmeter本身自带的录制脚本功能. 对于测试小白来说可用先使用jmete ...
- 《从0到1学习Flink》—— Data Source 介绍
前言 Data Sources 是什么呢?就字面意思其实就可以知道:数据来源. Flink 做为一款流式计算框架,它可用来做批处理,即处理静态的数据集.历史的数据集:也可以用来做流处理,即实时的处理些 ...
- html5响应式
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange’ in window ? ...
- AngularJS(六):表单-复选框
本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...
- 【深度精讲】JFinal中的Ret和Kv工具类的区别,你用对了吗?
在JFinal中有两个类Map的工具类,一个是有状态的Ret,一个是无状态的Kv,各种自己的应用场景,你用对了吗? 下面我们从多个方面来探究一下,JFinal针对这两个类的设计: 一.位置-com.j ...
- $'\r': command not found 或者 syntax error: unexpected end of file 或者 syntax error near unexpected token `$'\r''
执行shell脚本如果报如下错误: syntax error near unexpected token `$'\r'' syntax error: unexpected end of file $' ...
- LR使用流程简介之录制方式说明
1.LR脚本录制方式说明1)HTML-based script基于HTML的脚本 从内存中读取并下载资源,较少的关联处理,可以加入图片检查,回放时需要解析返回的信息 a-基于用户行为的方式 web_l ...
- Python中的绝对路径和相对路径
大牛们应该对路径都很了解了,这篇文章主要给像我这样的入门小白普及常识用的,啊哈 下面的路径介绍针对windows,其他平台的暂时不是很了解. 在编写的py文件中打开文件的时候经常见到下面其中路径的表达 ...