我之前学了学angular
发现angular和vue的指令有点类似
先说一下
new Vue({
el: "#box", // element（元素） 当前作用域
data(){
return { //用return返回对象
msg: "122"
}
}
})
首先是
v-model双向绑定数据
<input type="text" v-model="msg"/> {{msg}} <!--取数据-->
v-for循环
<div id="box">
<ul>
<!--ng-repeat-->
<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data(){
return{
// arr:['module','views','controlle','aaaaa']
arr:[
{"name":"xiaohong1","age":12},
{"name":"xiaohong2","age":12},
{"name":"xiaohong3","age":12},
{"name":"xiaohong4","age":12}
]
}
}
})
</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标签
<div id="box">
<div v-text="msg"></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
msg:"11111"
}
},
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-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>
接下来就是一个总结了
vue 是什么
简介型的javascript框架 个人开发 (刘雨溪)
特点：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 把标签内部的元素原位输出