Vue实例Vue指令
【摘要】 我之前学了学angular 发现angular和vue的指令有点类似先说一下new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" } ...
我之前学了学angular
发现angular和vue的指令有点类似
先说一下
new Vue({
el: "#box", // element（元素） 当前作用域
data(){
return { //用return返回对象
msg: "122"
}
}
})
首先是
v-model双向绑定数据
<input type="text" v-model="msg"/> {{msg}} <!--取数据-->
v-for循环
1 <div id="box">
2 <ul>
3 <!--ng-repeat-->
4 <li v-for="item in arr">
5 <span>{{item.name}}</span>
6 <span>{{item.age}}</span>
7 </li>
8 </ul>
9 </div>
10 <script type="text/javascript">
11 new Vue({
12 el:'#box',
13 data(){
14 return{
15 // arr:['module','views','controlle','aaaaa']
16 arr:[
17 {"name":"xiaohong1","age":12},
18 {"name":"xiaohong2","age":12},
19 {"name":"xiaohong3","age":12},
20 {"name":"xiaohong4","age":12}
21 ]
22 }
23 }
24 })
25 </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-text读取文本不能读取html标签
1 <div id="box">
2 <div v-text="msg"></div>
3 </div>
4
5 <script>
6 new Vue({
7 el: "#box",
8 data(){
9 return {
10 msg:"11111"
11 }
12 },
13 methods: {
14 say() {
15 alert(111);
16 }
17 }
18 })
19 </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 类名
1 <style>
2 .red {
3
4 background: red;
5 }
6
7 .blue {
8 width: 100px;
9 height: 100px;
10 background: blue;
11 }
12
13 </style>
14
15
16 <div id="box">
17 <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
18 <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元运算符方式-->
19 <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
20
21 </div>
22
23
24 <script>
25 new Vue({
26 el: "#box",
27 data(){
28 return {
29 isred:false
30 }
31 }
32 })
33 </script>v-style 与v-class用法大致一样 这个我就不写了
v-once 与我下边的例子 就是 加载一次 如果用到事件中就是事件只执行一次（@click.once="show"）
<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>
接下来就是一个总结了
1 vue 是什么
2
3 简介型的javascript框架 个人开发 (刘雨溪)
4
5 特点：mvvm m=mvc module 模型 v=view 视图 c=controller 控制器
6 mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递)
7 vue1 双向数据绑定 vue2 单向数据流
8 单页面应用
9
10
11
12
13 v-model 数据绑定
14 data 返回对象用 return
15
16 v-for 循环 格式 v-for="字段名 in(of) 数组json"
17
18 v-show 显示 隐藏 传递的值为布尔值 true false 默认为false
19
20 v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false
21
22 v-else-if 必须和v-if连用
23
24 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
25
26 v-bind 动态绑定 作用： 及时对页面的数据进行更改
27
28
29
30 v-on 绑定事件 函数必须写在methods里面
31 @click 快捷方法
32
33 v-text 解析文本
34
35 v-html 解析html标签
36
37 v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
38
39 v-once 进入页面时 只渲染一次 不在进行渲染
40
41 v-cloak 防止闪烁
42
43 v-pre 把标签内部的元素原位输出
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）