vue的初始化
vue的插值(angular里的表达式)
{{5*4}}
{{[1,2,3].reverse().join("-")}}
{{5>4 ? "真":"假"}}
<!-- Vue 1.0 :
单次插值 : {{*val}}值插入后将不能在改变
html插值 : {{{htmlStr}}}输出html 标记 用三个花括号表示 -->
如何初始化一组数据
初始化一组值后 可以用插值输出
new Vue({//初始化 Vue 实例
el:"#box", //指定挂载元素
data : {//初始化数据
msg : "Hello Vue!!!"
}
})
</script>
{{msg}}
Vue绑定
绑定属性
列举上课的例子
1, 给span一个title属性 title="这是title"
2.想把title的值换成初始化数据的值"msg", 用普通的{{}} 和数据名并不可行
这里引用 "v-bind:" 写成 "v-bind:title='msg' ",能够正常显示
3.在数据中初始化一个样式对象 给span绑定样式 "v-bind:style='styleObject' ".这样把样式又绑定在span上
4.定义一个变量"vm"来接收 new Vue的实例 这样vm可以得到初始化数据上的所有数据(可以打印一下vm ,在控制台查看一下)
5.可以不指定挂载元素 直接写上 vm.$mount("元素") 也是等同的
综合上面附上原码理解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表达式</title>
</head>
<body>
<div id="box">
<span v-bind:title="msg" v-bind:style="styleObject">鼠标停一下</span>
</div>
</body>
<script type="text/javascript" src="./js/vue2.0.js" charse="utf-8"></script>
<script type="text/javascript">
//vm 会接收所有data上的数据 vm.msg === data.msg
var vm = new Vue({//初始化产生 Vue 实例
//el:"#box", //指定挂载元素 //测试初始化不指定元素 用vm.$mount()来挂在元素
data : {
msg : "Hello Vue!!!",
styleObject:{
fontSize: "30px",
color: "red"
}
}
})
vm.$mount("#box")//将vue实例挂在到指定元素上去
//console.log(vm.$el)
</script>
</html>
绑定的深入
1.在vue中务必一定要data中初始化要使用的数据,否则会抛出警告
2.:attr 是 v-bind:attr的简写形式 (:style====v-bind:style)
3.vue绑定样式时 与原生样式混合时 vue绑定的样式等级会高些,也就是vue绑定的样式可以覆盖原生的样式
4.多个 以数组的形式绑定 :class="[a,b]"
5.现在data中初始化一个变量 isShow 为true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表达式</title>
<style>
.a{
color : blue;
}
.b{
color:pink;
}
.c{
font-size: 50px;
}
.d{
display: none;
}
</style>
</head>
<body>
<div id="box">
{{666}}
<span v-bind:title="msg" v-bind:style="styleObject" v-bind:id="a" v-bind:diy="msg">鼠标停一下</span>
<!-- :attr 是 v-bind:attr 的简写形式 -->
<span :style="styleObject">第二个</span>
<!-- :class 与 本身class 共存时 :class会在后面添加 有相同样式时 :class会覆盖原class -->
<div :class="{a:isA,b:isB}" class="c">
内容
</div>
<!-- 可以以数组的形式 将多个样式绑定上去 -->
<div :class="[first,second]">内容二</div>
<!-- 三元表达式形式 -->
<div :class="[first,isShow?'':third]">内容三</div>
<div :style="[styleObject,styleObject2]">
style数组写法
</div>
</div>
</body>
<script type="text/javascript" src="./js/vue2.0.js" charse="utf-8"></script>
<script type="text/javascript">
//vm 会接收所有data上的数据 vm.msg === data.msg
var vm = new Vue({//初始化产生 Vue 实例
//el:"#box", //指定挂载元素 //测试初始化不指定元素 用vm.$mount()来挂在元素
data : {
msg : "Hello Vue!!!", //务必在data中初始化要使用的数据, 否则会抛出错误警告
isA:true,
isB:true,
a: "testId",
first : "a",
second : "c",
isShow :true,
third:"d",
styleObject:{
fontSize: "30px",
color: "red"
},
styleObject2:{
background:"blue",
border:"5px solid yellow"
}
}
})
vm.$mount("#box")//将vue实例挂在到指定元素上去
//console.log(vm.$el)
</script>
</html>```
网友评论