vue.js部分指令
2017-04-16 16:18
232 查看
参考来自 vue.js官网点击打开链接
-------------------------------------------------------------------
初学笔记 不适合参考 如有错误请指正
-------------------------------------------------------------------
vue.js 指令 是带有
注意 每个添加指令的dom 其自身或父元素 必须vue实例化
1. v-text 指令
<div id="demo" v-text='msg'></div> // 即使元素里有标签如a p 等内容 也会比msg内的值全部替代
var demo = new Vue({
el:'#demo',
data:{
msg:'更新元素的textcontent',
}
})
// 等同于
<div id="demo2">{{msg}}</div>
var demo2 = new Vue({
el : "#demo2",
data:{
msg:'插入内容',
}
})
2 . v-html
<div id="demo3" v-html='html'></div> // 与v-text不同的是 html内的html标签可以被解析 它也会完全改变标签内所有子元素即重新渲染
var demo3 = new Vue({
el:"#demo3",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
});
// 内有子元素， 子元素会被清除 由html内的能容重新渲染
<div id="demo4" v-html='html'>
<span>haah</span>
<p>hancncnckasckcn</p>
</div>
var demo4 = new Vue({
el:"#demo4",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
})
3 v-show
<div id="demo5" v-show='show'>hahahahhahahhah</div> // show值为真展示 假隐藏
var demo5 = new Vue({
el:"#demo5",
data:{
show:true, // 当为false时demo5隐藏
}
})
4 v-if
<div id="demo6" v-if='ok'>如果成立则输出</div> // 判断ok的值为真显示
var demo6 =new Vue({
el:'#demo6',
data:{
ok:false,
}
})
// 可做选择
<div class='demo7'>
<div v-if='random'>如果随机数大于0.5则输出</div>
<div v-else>如果随机数小于0.5则输出</div>
</div>
// v-if 和 v-else 必须包含在同一个父元素内 并且父元素要被实例化
var demo7 =new Vue({
el:'.demo7',
data:{
random:Math.random() > 0.5, // 给出一个判断条件
}
});
5 v-for
<div id="demo8" > //注意v-for不能写在父元素上 即不能写在实例vue的对象上
<p v-for="itme in itmes">{{itme.text}}</p> // 产生itmes内有多少个itme.text就有多少个p标签被产生
</div>
// v-for //必须使用在实例化元素的子元素上
var demo8 = new Vue({
el:'#demo8',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// 可以使用索引
<div id="demo9" >
<p v-for="(itme,index) in itmes">{{itme.text}}--{{index}}</p>
</div>
// v-for 当前项索引
var demo9 = new Vue({
el:'#demo9',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// 渲染多个模块
<div id="demo10">
<template v-for='itme in itmes'>
<a href="#">{{itme.text}}</a>
<p>{{itme.msg}}</p>
</template>
</div>
var demo10 = new Vue({
el:"#demo10",
data :{
itmes:[
{text:"第一个", msg:"first"},
{text:"第二个", msg:"seccone"},
{text:"第三个", msg:"three"},
{text:"第四个", msg:"foure"},
]
}
})
// 对象迭代
<div id="demo11">
<ul>
<li v-for='(value,key,index) in object'>{{index}}:{{key}}:{{value}}</li>
</ul>
</div>
//v-for 对象迭代
var demo11 = new Vue({
el:"#demo11",
data :{
object:{
name:"weitong",
sex:"nan",
year:"22",
}
}
})
6 v-on
<div id="demo12" v-on:click="clicks">点击</div> // 添加事件名称和处理事件的函数名
var demo12 = new Vue({
el:'#demo12',
data :{
},
methods:{ // methods: 可以理解为内部写函数的方法
clicks:function(){
alert(0);
}
}
})
7. v-model
//表单处理 一般获取的是value的值 或者布尔值
<div id="demo13">
<input type="text" v-model='message' placeholder="输入"/> // message 为表单的输入内容
<span&
4000
gt;输入内容 ： {{message}}</span> // 当输入内容改变时 显示同时改变
</div>
var demo13 = new Vue({
el:"#demo13",
data:{
message:'输入内容',
}
})
// 单个复选框
<div id="demo14">
<input type="checkbox" id="check" v-model='checked' />
<label for="check">{{checked}}</label> // 显示单选框是否被选中
</div>
var demo14 = new Vue({
el:'#demo14',
data:{
checked:'', // 初始时不显示 则将checked值改为 “”||false 之后初始显示false
}
})
//
<div id="demo15">
<input type="checkbox" id="jack" value="Jac" v-model="checkedName">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedName">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedName">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedName }}</span> // 显示选中框的value值 获取的是value的值
</div>
// v-model 获取的是表单元素的value值（点击时）
var demo15 = new Vue({
el:'#demo15',
data:{
checkedName:[],
}
})
// 绑定value
<div id="demo16">
<input type="checkbox" v-model="toggle" v-bind:true-value='a' v-bind:false-value='b'> 如果不绑定则显示的是布尔值
<span>{{toggle}}</span>
</div>
// 复选框绑定value
var demo16 = new Vue({
el:'#demo16',
data: {
toggle:'',
a:'a',
b:'b',
}
})
----------------------------------------
了解更多参考 vue.s官网
------------------------------------------
源码
运行时注意将vue.js 路径修改
----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>指令</title>
</head>
<body>
<div id="demo" v-text='msg'></div>
<div id="demo2">{{msg}}</div>
<div id="demo3" v-html='html'></div>
<div id="demo4" v-html='html'>
<span>haah</span>
<p>hancncnckasckcn</p>
</div>
<div id="demo5" v-show='show'>hahahahhahahhah</div>
<div id="demo6" v-if='ok'>如果成立则输出</div>
<div class='demo7'>
<div v-if='random'>如果随机数大于0.5则输出</div>
<div v-else>如果随机数小于0.5则输出</div>
</div>
<div id="demo8" >
<p v-for="itme in itmes">{{itme.text}}</p>
</div>
<div id="demo9" >
<p v-for="(itme,index) in itmes">{{itme.text}}--{{index}}</p>
</div>
<div id="demo10">
<template v-for='itme in itmes'>
<a href="#">{{itme.text}}</a>
<p>{{itme.msg}}</p>
</template>
</div>
<div id="demo11">
<ul>
<li v-for='(value,key,index) in object'>{{index}}:{{key}}:{{value}}</li>
</ul>
</div>
<div id="demo12" v-on:click="clicks">点击</div>
<div id="demo13">
<input type="text" v-model='message' placeholder="输入"/>
<span>输入内容 ： {{message}}</span>
</div>
<div id="demo14">
<input type="checkbox" id="check" v-model='checked' />
<label for="check">{{checked}}</label>
</div>
<div id="demo15">
<input type="checkbox" id="jack" value="Jac" v-model="checkedName">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedName">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedName">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedName }}</span>
</div>
<div id="demo16">
<input type="checkbox" v-model="toggle" v-bind:true-value='a' v-bind:false-value='b'>
<span>{{toggle}}</span>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
// v-text
var demo = new Vue({
el:'#demo',
data:{
msg:'更新元素的textcontent',
}
})
var demo2 = new Vue({
el : "#demo2",
data:{
msg:'插入内容',
}
})
// v-html
var demo3 = new Vue({
el:"#demo3",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
});
// 更新时会将原有的innerhtml替代
var demo4 = new Vue({
el:"#demo4",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
})
//v-show 改变display属性
var demo5 = new Vue({
el:"#demo5",
data:{
show:true, // 当为false时demo5隐藏
}
})
// v-if
var demo6 =new Vue({
el:'#demo6',
data:{
ok:false,
}
})
// v-if 和 v-else 必须包含在同一个父元素内 并且父元素要被实例化
var demo7 =new Vue({
el:'.demo7',
data:{
random:Math.random() > 0.5,
}
});
// v-for //必须使用在实例化元素的子元素上
var demo8 = new Vue({
el:'#demo8',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// v-for 当前项索引
var demo9 = new Vue({
el:'#demo9',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// v-for 渲染多个模块
var demo10 = new Vue({
el:"#demo10",
data :{
itmes:[
{text:"第一个", msg:"first"},
{text:"第二个", msg:"seccone"},
{text:"第三个", msg:"three"},
{text:"第四个", msg:"foure"},
]
}
})
//v-for 对象迭代
var demo11 = new Vue({
el:"#demo11",
data :{
object:{
name:"weitong",
sex:"nan",
year:"22",
}
}
})
// v-on
var demo12 = new Vue({
el:'#demo12',
data :{
},
methods:{
clicks:function(){
alert(0);
}
}
})
// v-model
var demo13 = new Vue({
el:"#demo13",
data:{
message:'输入内容',
}
})
//复选框
var demo14 = new Vue({
el:'#demo14',
data:{
checked:''|| false,
}
})
// v-model 获取的是表单元素的value值（点击时）
var demo15 = new Vue({
el:'#demo15',
data:{
checkedName:[],
}
})
// 复选框绑定value
var demo16 = new Vue({
el:'#demo16',
data: {
toggle:'',
a:'a',
b:'b',
}
})
</script>
</body>
</html>
-------------------------------------------------------------------
初学笔记 不适合参考 如有错误请指正
-------------------------------------------------------------------
vue.js 指令 是带有
v-前缀的特殊属性 ，指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
注意 每个添加指令的dom 其自身或父元素 必须vue实例化
1. v-text 指令
<div id="demo" v-text='msg'></div> // 即使元素里有标签如a p 等内容 也会比msg内的值全部替代
var demo = new Vue({
el:'#demo',
data:{
msg:'更新元素的textcontent',
}
})
// 等同于
<div id="demo2">{{msg}}</div>
var demo2 = new Vue({
el : "#demo2",
data:{
msg:'插入内容',
}
})
2 . v-html
<div id="demo3" v-html='html'></div> // 与v-text不同的是 html内的html标签可以被解析 它也会完全改变标签内所有子元素即重新渲染
var demo3 = new Vue({
el:"#demo3",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
});
// 内有子元素， 子元素会被清除 由html内的能容重新渲染
<div id="demo4" v-html='html'>
<span>haah</span>
<p>hancncnckasckcn</p>
</div>
var demo4 = new Vue({
el:"#demo4",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
})
3 v-show
<div id="demo5" v-show='show'>hahahahhahahhah</div> // show值为真展示 假隐藏
var demo5 = new Vue({
el:"#demo5",
data:{
show:true, // 当为false时demo5隐藏
}
})
4 v-if
<div id="demo6" v-if='ok'>如果成立则输出</div> // 判断ok的值为真显示
var demo6 =new Vue({
el:'#demo6',
data:{
ok:false,
}
})
// 可做选择
<div class='demo7'>
<div v-if='random'>如果随机数大于0.5则输出</div>
<div v-else>如果随机数小于0.5则输出</div>
</div>
// v-if 和 v-else 必须包含在同一个父元素内 并且父元素要被实例化
var demo7 =new Vue({
el:'.demo7',
data:{
random:Math.random() > 0.5, // 给出一个判断条件
}
});
5 v-for
<div id="demo8" > //注意v-for不能写在父元素上 即不能写在实例vue的对象上
<p v-for="itme in itmes">{{itme.text}}</p> // 产生itmes内有多少个itme.text就有多少个p标签被产生
</div>
// v-for //必须使用在实例化元素的子元素上
var demo8 = new Vue({
el:'#demo8',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// 可以使用索引
<div id="demo9" >
<p v-for="(itme,index) in itmes">{{itme.text}}--{{index}}</p>
</div>
// v-for 当前项索引
var demo9 = new Vue({
el:'#demo9',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// 渲染多个模块
<div id="demo10">
<template v-for='itme in itmes'>
<a href="#">{{itme.text}}</a>
<p>{{itme.msg}}</p>
</template>
</div>
var demo10 = new Vue({
el:"#demo10",
data :{
itmes:[
{text:"第一个", msg:"first"},
{text:"第二个", msg:"seccone"},
{text:"第三个", msg:"three"},
{text:"第四个", msg:"foure"},
]
}
})
// 对象迭代
<div id="demo11">
<ul>
<li v-for='(value,key,index) in object'>{{index}}:{{key}}:{{value}}</li>
</ul>
</div>
//v-for 对象迭代
var demo11 = new Vue({
el:"#demo11",
data :{
object:{
name:"weitong",
sex:"nan",
year:"22",
}
}
})
6 v-on
<div id="demo12" v-on:click="clicks">点击</div> // 添加事件名称和处理事件的函数名
var demo12 = new Vue({
el:'#demo12',
data :{
},
methods:{ // methods: 可以理解为内部写函数的方法
clicks:function(){
alert(0);
}
}
})
7. v-model
//表单处理 一般获取的是value的值 或者布尔值
<div id="demo13">
<input type="text" v-model='message' placeholder="输入"/> // message 为表单的输入内容
<span&
4000
gt;输入内容 ： {{message}}</span> // 当输入内容改变时 显示同时改变
</div>
var demo13 = new Vue({
el:"#demo13",
data:{
message:'输入内容',
}
})
// 单个复选框
<div id="demo14">
<input type="checkbox" id="check" v-model='checked' />
<label for="check">{{checked}}</label> // 显示单选框是否被选中
</div>
var demo14 = new Vue({
el:'#demo14',
data:{
checked:'', // 初始时不显示 则将checked值改为 “”||false 之后初始显示false
}
})
//
<div id="demo15">
<input type="checkbox" id="jack" value="Jac" v-model="checkedName">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedName">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedName">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedName }}</span> // 显示选中框的value值 获取的是value的值
</div>
// v-model 获取的是表单元素的value值（点击时）
var demo15 = new Vue({
el:'#demo15',
data:{
checkedName:[],
}
})
// 绑定value
<div id="demo16">
<input type="checkbox" v-model="toggle" v-bind:true-value='a' v-bind:false-value='b'> 如果不绑定则显示的是布尔值
<span>{{toggle}}</span>
</div>
// 复选框绑定value
var demo16 = new Vue({
el:'#demo16',
data: {
toggle:'',
a:'a',
b:'b',
}
})
----------------------------------------
了解更多参考 vue.s官网
------------------------------------------
源码
运行时注意将vue.js 路径修改
----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>指令</title>
</head>
<body>
<div id="demo" v-text='msg'></div>
<div id="demo2">{{msg}}</div>
<div id="demo3" v-html='html'></div>
<div id="demo4" v-html='html'>
<span>haah</span>
<p>hancncnckasckcn</p>
</div>
<div id="demo5" v-show='show'>hahahahhahahhah</div>
<div id="demo6" v-if='ok'>如果成立则输出</div>
<div class='demo7'>
<div v-if='random'>如果随机数大于0.5则输出</div>
<div v-else>如果随机数小于0.5则输出</div>
</div>
<div id="demo8" >
<p v-for="itme in itmes">{{itme.text}}</p>
</div>
<div id="demo9" >
<p v-for="(itme,index) in itmes">{{itme.text}}--{{index}}</p>
</div>
<div id="demo10">
<template v-for='itme in itmes'>
<a href="#">{{itme.text}}</a>
<p>{{itme.msg}}</p>
</template>
</div>
<div id="demo11">
<ul>
<li v-for='(value,key,index) in object'>{{index}}:{{key}}:{{value}}</li>
</ul>
</div>
<div id="demo12" v-on:click="clicks">点击</div>
<div id="demo13">
<input type="text" v-model='message' placeholder="输入"/>
<span>输入内容 ： {{message}}</span>
</div>
<div id="demo14">
<input type="checkbox" id="check" v-model='checked' />
<label for="check">{{checked}}</label>
</div>
<div id="demo15">
<input type="checkbox" id="jack" value="Jac" v-model="checkedName">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedName">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedName">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedName }}</span>
</div>
<div id="demo16">
<input type="checkbox" v-model="toggle" v-bind:true-value='a' v-bind:false-value='b'>
<span>{{toggle}}</span>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
// v-text
var demo = new Vue({
el:'#demo',
data:{
msg:'更新元素的textcontent',
}
})
var demo2 = new Vue({
el : "#demo2",
data:{
msg:'插入内容',
}
})
// v-html
var demo3 = new Vue({
el:"#demo3",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
});
// 更新时会将原有的innerhtml替代
var demo4 = new Vue({
el:"#demo4",
data:{
html:"<a href='#'>更新元素innerHTML</a>",
}
})
//v-show 改变display属性
var demo5 = new Vue({
el:"#demo5",
data:{
show:true, // 当为false时demo5隐藏
}
})
// v-if
var demo6 =new Vue({
el:'#demo6',
data:{
ok:false,
}
})
// v-if 和 v-else 必须包含在同一个父元素内 并且父元素要被实例化
var demo7 =new Vue({
el:'.demo7',
data:{
random:Math.random() > 0.5,
}
});
// v-for //必须使用在实例化元素的子元素上
var demo8 = new Vue({
el:'#demo8',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// v-for 当前项索引
var demo9 = new Vue({
el:'#demo9',
data:{
itmes:[
{text:"hahahha"},
{text:"hahxxx"},
{text:"hasss"},
{text:"hahvvv"},
]
}
})
// v-for 渲染多个模块
var demo10 = new Vue({
el:"#demo10",
data :{
itmes:[
{text:"第一个", msg:"first"},
{text:"第二个", msg:"seccone"},
{text:"第三个", msg:"three"},
{text:"第四个", msg:"foure"},
]
}
})
//v-for 对象迭代
var demo11 = new Vue({
el:"#demo11",
data :{
object:{
name:"weitong",
sex:"nan",
year:"22",
}
}
})
// v-on
var demo12 = new Vue({
el:'#demo12',
data :{
},
methods:{
clicks:function(){
alert(0);
}
}
})
// v-model
var demo13 = new Vue({
el:"#demo13",
data:{
message:'输入内容',
}
})
//复选框
var demo14 = new Vue({
el:'#demo14',
data:{
checked:''|| false,
}
})
// v-model 获取的是表单元素的value值（点击时）
var demo15 = new Vue({
el:'#demo15',
data:{
checkedName:[],
}
})
// 复选框绑定value
var demo16 = new Vue({
el:'#demo16',
data: {
toggle:'',
a:'a',
b:'b',
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js常用指令总结
- Vue.js学习系列（十七）--常用指令（一）
- 从vue.js的源码分析，input和textarea上的v-model指令到底做了什么
- Vue.js基础指令、基本介绍
- AngularJS directive指令之require部分
- vuejs-指令详解
- Vue.js 系列教程 1：渲染，指令，事件
- Vue.js入门-简介和指令介绍
- vue.js指令和组件详细介绍及实例
- Vuejs——（2）Vue生命周期，数据，手动挂载，指令，过滤器
- Vue.js常用指令汇总（v-if、v-for等）
- vue.js指令v-for使用及索引获取
- Vue.js学习系列（二十）--常用指令（三）
- Vue.js介绍以及vue的常见指令
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js第一天学习笔记（数据的双向绑定、常用指令）
- vue.js中指令Directives详解
- 腾讯十天Vue.js课程之二：指令与模版