MVVM框架
数据可以影响视图视图可影响数据。
基本结构
引入：<script src="js/vue.js"></script>
html部分:
<div id="app"></div>
script部分:
<script>
var app= new Vue({
el:'#app',
data:{
//所有的数据都写在data里面
},
methods:{
//所有的函数都写在methods里面
}
})
</script>
表达式
{{msg}}-->显示 、{{msg=320}}-->赋值 、{{bok?"haha":"wuwu"}}-->三目
<div id="app">
<h1>{{mas}} {{msg=320}} {{bok?"haha":"wuwu"}}</h1>
</div>
<script>
var app= new Vue({
el:'#app',
data:{
msg:"哈哈",
bok:true
}
})
</script>
声明式渲染
<div id="app">
{{msg}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{//专门用来存数据
msg:'hello'
}
})
</script>
- 动态绑定数据(动态更改dom属性) v-bind:title（会爆红），可直接写成 :title
- 条件判断 v-if
<div id="app">
<button type="button" @click="bok=!bok">点击显示和隐藏</button>
<h1 v-if="bok">看我</h1>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
bok:true;
}
})
</script>
- 点击事件：v-on：click--->简写为 @click
- 循环 v-for
// 数组
<ul>
<li v-for="item in friutes"> {{item}}</li>
</ul>
<ol>
<li v-for="(item,index) in friutes">{{item}}我的索引是{{index}}</li>
</ol>
//JSON
<ul>
<li v-for="(item,index) in pop">{{index}}的名字是{{item.name}}</li>
</ul>
//对象
<ol>
<li v-for="(item,index) in obj">{{index}}的值{{item}}</li>
</ol>
<script>
var app=new Vue({
el:'#app',
data:{
friutes:['西瓜','葡萄','苹果','橘子'],
pop:[
{name:'lili'},
{name:'wawa'},
{name:'huhu'},
{name:'bobo'},
],
obj: {
name1: 'lili',
name2: 'huhu',
name3: 'haha',
name4: 'wowo'
}
}
})
</script>
- 事件绑定
需求点击按钮翻转文字
<div id="app">
<button type="button" @click="reverseMessage">点我翻转文字</button>
<h1>{{msg}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "你好吗"
},
methods: {
reverseMessage(){
this.msg = this.msg.split('').reverse().join('')
}
}
})
</script>
- 视图影响数据 v-model
v-once 只被影响一次 后面视图改变数据不改变
<div id="app">
<h1 v-once>{{msg}}</h1>
<input type="text" v-model="msg">
<h1>{{msg}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "你好吗"
}
})
</script>
- 渲染标签 v-html
<div id="app">
<div v-html="msg"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg:'<h1>我是标签1</h1>'
}
})
</script>
- 自定义组建
组建需要注册
Vue.component('组建名',{props:['属性名'],template:'<li>{{todo}}</li>'});
- 我定义了属性名为 todo,todo的msg的值是data里面msg的值,而li拿的是todo的值
<div id="app">
<warm-t :todo="msg"></warm-t>
</div>
<script>
//注册一个组建
Vue.component('warm-t',{
props:['todo'],
template:'<li>{{todo}}</li>'
});
var app = new Vue({
el: '#app',
data: {
msg: "你好 "
}
})
</script>
- 数组--》使用自定义组建，通过自定义属性给自定义组建传数据
<div id="app">
<warm-t v-for="item in ary" :todo="item"></warm-t>
</div>
<script>
//注册一个组建
Vue.component('warm-t',{
props:['todo'],
template:'<li>{{todo}}</li>'
});
var app = new Vue({
el: '#app',
data: {
ary:['西瓜','葡萄','苹果','橘子']
}
})
- json
<div id="app">
<warm-t v-for="(item,index) in pop" :todo="item"></warm-t>
</div>
<script>
//注册一个组建
Vue.component('warm-t',{
props:['todo'],
template:'<li>{{todo.name}}</li>'
});
var app = new Vue({
el: '#app',
data: {
pop:[
{name:'lili'},
{name:'wawa'},
{name:'huhu'},
{name:'bobo'},
]
}
})
</script>
- v-show和v-if
<div id="app">
<button type="button" @click="bok=!bok"> 点击显示隐藏</button>
<div v-show="bok">你能看见我吗</div>//display:none
<div v-if="bok">你能看见我吗</div>//appendChild和removeChild
</div>
<script>
var app = new Vue({
el: '#app',
data: {
bok: true
}
})
</script>
- 购物车小例子
使用技术：bootstrap和vue2
npm init --y
npm i --save-dev vue bootstrap
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="node_modules/vue/js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<table class="table table-bordered col-md-12">
<caption class="text-danger">购物车</caption>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">商品价格</th>
<th class="text-center">操作</th>
</tr>
<tr v-for="(item,index) in ary">
<td class="text-center">{{item.name}}</td>
<td class="text-center">{{item.price}}</td>
<td class="text-center">
<button class="btn btn-danger text-center
" @click="removeOne(index)">删除
</button>
</td>
</tr>
<tr>
<td colspan="3" class="text-right" v-show="ary.length?true:false">
<button class="btn btn-danger" @click="removeAll()">
删除全部
</button>
</td>
</tr>
</table>
<form type="form">
<div class="form-group">
<label for="name">商品名称</label>
<input type="text" id="name" class="form-control" placeholder="请输入商品名称" v-model="name">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="text" id="price" class="form-control" placeholder="请输入商品价格" v-model="price">
</div>
<div class="form-group">
<button type="button" class="btn btn-info" @click="add()">添加</button>
<button type="button" class="btn btn-warning" @click="reset()">重置</button>
</div>
</form>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
price: '',
ary: [
{name: "iphone1", price: 3999},
{name: "iphone2", price: 4999},
{name: "iphone5", price: 6999}
]
},
methods: {
removeOne(index){
this.ary.splice(index, 1);
},
removeAll(){
this.ary = [];
},
add(){
this.ary.push({
name: this.name,
price: this.price
});
this.name = '';
this.price = '';
},
reset(){
this.name = '';
this.price = '';
}
}
})
</script>
</body>
</html>
