一、了解 Vue.js
1 Vue.js是什么？
作者：尤雨溪
Vue.js是一套用于构建用户界面的渐进式框架。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。
2 特性：
确实轻量、数据绑定、指 令、插件化
3 vue的引入
<script src="./vue.js"> </script>
直接用script引入
4 输出hello vue
例子：
html代码：
<div class="text">
{{massage}}
</div>
js代码：
<script src="./vue.js"> </script>
<script>
new Vue({
el:'.text',
data:{
massage:'hello vue'
}
})
</script>
el：是element的缩写， 它是一个选择器
5 v-for 循环
循环数组
html代码：
<div class="text">
<ul>
<li v-for='value in arr'> // 循环数组
{{value}} // value 是一个值，可以改变
</li>
</ul>
</div>
js代码:
<script src="./vue.js"> </script>
<script>
new Vue({
el:'.text',
data:{
arr:[1,2,3,4,5,9]
}
})
</script>
循环对象
html代码：
<div class="text">
<ul>
<li v-for='value in obj'> // 循环对象
{{value}} // value 是一个值，可以改变
</li>
</ul>
</div>
js代码:
<script src="./vue.js"> </script>
<script>
new Vue({
el:'.text',
data:{
obj:{
name:'jack',
age:18
}
}
})
</script>
循环数组对象
html 代码：
<div class="text">
<ul>
<li v-for='value in arrs'>
{{value.num}}
{{value.name}}
{{value.price}}
</li>
</ul>
</div>
js代码：
<script src="./vue.js"> </script>
<script>
new Vue({
el:'.text',
data:{
arrs:[
{num:1,name:'苹果',price:3},
{num:2,name:'香蕉',price:5},
{num:3,name:'梨',price:6},
]
}
})
</script>
6 小练习 做table表格
html代码：
<div class="top">
<table border="1" cellspacing='0'>
<thead>
<tr>
<th>名称</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="value in arrs">
<td>{{value.name}}</td>
<td>{{value.num}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:'.top',
data:{
arrs:[
{name:'苹果',num:'1',price:'4'},
{name:'梨',num:'4',price:'6'},
{name:'香蕉',num:'3',price:'2'}
]
}
})
</script>
7 v-model双向绑定,用于表单元素
html代码:
<div id="itany">
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
js代码：
<script src="./js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
}
})
</script>
8 v-on事件
methods是一个方法，点击事件执行一个方法
html代码：
<div id='itany'>
<button v-on:click='alt'>按钮</button>
</div>
js代码：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
methods:{
alt:function(){
alert(this.msg)
}
}
})
</script>
网友评论