1、Vue引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
{{20 + 1010}}<br>
{{myname}}
</div>
<script>
new Vue({
el:"#app",
data:{
myname:"kerwin"
}
})
</script>
</body>
</html>
2、模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<style>
div{
width: 6.25rem;
height: 6.25rem;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
{{myname}} --> {{myage}}
<div :class="whichcolor" @click="changeColor"></div>
<div :class="isColor?'red':'yellow'" @click="changeColor"></div>
<button @click="changeMyAge">点击</button>
</div>
<script>
new Vue({
el:"#app",
data:{
myname:"kerwin",
myage:191,
whichcolor:"red",
isColor:true
},
methods:{
changeMyAge(){
this.myage = this.myage + 1;
},
changeColor(){
this.whichcolor = "yellow";
this.isColor = !this.isColor;
}
}
})
</script>
</body>
</html>
3、常见的命令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{msg}}
<div v-text="mytext"></div>
<div v-html="myhtml"></div>
<button v-if="checkvif">测试v-if</button>
<button v-else-if="checkvelseif">测试v--else-if</button>
<button v-else="checkvelse">测试v-else</button>
<div v-show="vshow">v-show</div>
<ul>
<li v-for="(item,index) in arrayfor">{{item}}-{{index}}</li>
</ul>
<ul>
<li v-for="(oj,key) in objfor">{{key}}-{{oj}}</li>
</ul>
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg: "占山",
mytext: "<h1>你DATe</h1>",
myhtml: "<h1>你匹</h1>",
checkvif: true,
vshow: false,
arrayfor: ['篮球','羽毛球','乒乓球'],
objfor: {play:"篮球",people:"张三",age:19}
}
})
</script>
</body>
</html>
4、数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1>单向数据绑定</h1>
<input type="text" v-bind:value="name" v-bind:class="name"/><br />
<h1>双向数据绑定</h1>
<input type="text" v-model="name" />
<button v-on:click="change('nidaye')">点击</button>
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
name:"Hello World",
},
methods:{
change:function(name){
this.name=name
}
}
})
</script>
</body>
</html>
5、过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
输入内容:<input type="text" v-model="inputStr"/><br>
输出内容:{{inputStr}} <br>
反转内容:{{inputStr | reversal}} <br />
{{inputStr | reversal1('反转内容:')}}
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
Vue.filter('reversal1',function(val,args){
return args + val.split('').reverse().join('');
})
new Vue({
el:"#app",
data:{
inputStr: '',
},
filters:{
reversal(val){
return val.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
6、watch数据监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>Watch监听</div>
<input type="text" name="" v-model="msg"/>
<div>深度监听</div>
<input type="text" name="" v-model="omg.text"/>
<div>计算属性</div>
(<input type="text" v-model="n1" /> +
<input type="text" v-model="n2" />) *
<input type="text" v-model="n3" /> = {{result}}
{{code}}
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg: '',
omg: {text:''},
n1:'',
n2:'',
n3:'',
},
computed:{
result(){
return (Number(this.n1) + Number(this.n2))*Number(this.n3)
}
},
watch:{
msg(newval,oldval){
console.log(newval,oldval);
},
omg:{
handler(newval,oldval){
if(newval.text == "love"){
alert(newval.text);
}
},
deep: true
}
}
})
</script>
</body>
</html>
7、组件化开发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
var MyHeader={
template:`
<div>我是头部</div>
`
}
Vue.component('MyFooter',{
template:`
<div>我是尾部</div>
`
})
var MyBody={
template:`
<div>我是圣体</div>
`
}
new Vue({
el:'#app',
components:{
MyHeader,
MyBody
},
template:`
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
`
})
</script>
</body>
</html>
8、solt插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
var Child={
template:`
<div>我是子组件</div>
`
}
var Parent={
template:`
<div>
我是父组件
<slot name="hello"></slot>
<child ref='childs'></child>
</div>
`,
components:{
Child,
},
mounted(){
console.log(this.$refs.childs.$el);
}
}
new Vue({
el:"#app",
components:{
Parent,
},
template:`
<div>
<parent>
<div>牛逼郑</div>
<div slot="hello">净化环境搭建我</div>
</parent>
</div>
`
})
</script>
</body>
</html>
9、父子通信
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
var Child={
template:`
<div>
我是子组件{{sendchild}}
<button @click="sendparent">我要反馈给父亲的东西</button>
</div>
`,
props:['sendchild'],
methods:{
sendparent(){
this.$emit('baba',"这个市儿子会给你的都关系");
}
},
}
var Parent={
template:`
<div>我是父组件 {{msg}}
<child sendchild='为夫给你的大大' @baba='reserve'></child>
</div>
`,
components:{
Child,
},
data(){
return{
msg:''
}
},
methods:{
reserve(val){
this.msg = val;
}
}
}
new Vue({
el: "#app",
components:{
Parent,
},
template:`
<div>
<parent></parent>
</div>
`,
})
</script>
</body>
</html>
10、非父子通信
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" src="js/vue.js"></script>
<script>
Vue.prototype.$bus=new Vue();
var MyHeader={
template:`
<div>我是MyHeader <br>
{{headermsg}}
</div>
`,
data(){
return{
headermsg:"我是头部信息"
}
},
created(){
this.$bus.$on('sending',val=>{
this.headermsg = val;
})
}
}
var MyBody={
template:`
<div>我是MyBody</div>
`
}
var MyFooter={
template:`
<div>我是MyFooter
<button @click='sendhead'>我要跟头部沟通</button>
</div>
`,
methods:{
sendhead(){
this.$bus.$emit('sending','我是底部的数据');
}
}
}
new Vue({
el:"#app",
components:{
MyHeader,
MyBody,
MyFooter
},
template:`
<div>
<my-header></my-header><hr>
<my-body></my-body><hr>
<my-footer></my-footer>
</div>
`,
})
</script>
</body>
</html>