vue的使用
1、vue下载及引入
2、创建vue实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src='../assets/jquery.js'></script>
<script type="text/javascript" src='../assets/vue.js'></script> //引入vue
</head>
<body>
<!-- 声明式渲染 文本插值 -->
<div id="codeVue">{{message}}</div>
</body>
<script type="text/javascript">
// 实例一个vue
var app1 = new Vue({
el: '#codeVue', //选择器 用来获取元素 id class 标签都可用强烈推荐id
data: { //data 必须 所有的数据
message: 'Hello Vue!' //用于显示的内容
}
})
</script>
</html>
3、v-bind 次处是：“将div的 title 属性和 Vue 实例中的 message 属性一致
<body>
<!-- v-bind 指令 作用是：“将div的 title 属性和 Vue 实例中的 message 属性一致”。 -->
<div id="codeVue">
<span v-bind:title="message">悬停在上面会显示内容</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#codeVue',
data: {
message: 'Hello Vue!'
}
})
</script>
4 v-if v-for
if 切换是否显示
for 循环添加绑定
<body>
<!-- 条件 v-if -->
<div id="codeVue">
<p v-if="seen">you see me now </p>
</div>
<!-- 循环 v-for -->
<div id='forVue'>
<ol>
<li v-for="arrContent in arrs">
{{arrContent.key}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
var app1 = new Vue({
el: '#codeVue',
data: {
seen: true
}
})
var arrContent =[{key:'learn javascript'},{key:'learn vue '},{key:'learn html'}]
var app2=new Vue({
el:'#forVue',
data:{
arrs:arrContent
}
})
</script>
