绑定事件指令 v-on
<div id="app">
{{num}}
<button v-on:click="num++">点击一</button>
<button @click="num++">点击二</button>
<button @click="countSum()">点击三</button>
<button @click="countSum">点击四</button>
<button @click="say('今天天气好冷')">点击五</button>
</div>
<script>
new Vue({
el:"#app",
data:{
num:0
},
methods:{
countSum(){
this.num = this.num + 1
},
say(msg){
console.log(msg);
}
}
})
</script>
计算属性
<div id="app">
{{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}
{{birth1}}
{{getBirth1()}}
</div>
<script>
new Vue({
el:"#app",
data:{
birthday:1529032123201
},
methods:{
getBirth1(){
return new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月" ;
}
},
computed:{
birth1(){
return new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月" ;
}
}
})
</script>
watch
<div id="app">
<input type="text" v-model="msg"/>
</div>
<script>
new Vue({
el: "#app",
data:{
msg:''
},
watch:{
msg(newVar,oldVar){
console.log(newVar,oldVar)
}
}
})
Vue 组件
全局组件
<div id="app1">
<componet1></componet1>
<componet2></componet2>
</div>
<div id="app2">
<componet1></componet1>
<componet2></componet2>
</div>
<script>
new Vue({
el:"#app1"
});
new Vue({
el:"#app2"
});
//全局组件
Vue.component("componet1",{
template:"<h1>符合国际法</h1>"
});
var componet2={
template:"<h1>工会经费就</h1>"
};
Vue.component("componet2",componet2);
</script>
局部组件
<div id="app1">
<componet1></componet1>
<componet2></componet2>
</div>
<div id="app2">
<componet1></componet1>
</div>
<script>
new Vue({
el:"#app1",
components:{
"componet1":{
template:"<h2>和港口集团</h2>"
},
"componet2":{
template:"<h2>规划面积挺好</h2>"
}
}
});
new Vue({
el:"#app2"
})
</script>
模板里面的数据必须函数
<div id="app1">
<componet1></componet1>
{{name}}
</div>
<template id="mytemplate">
<form>
{{name}}<input type="text" />
</form>
</template>
</body>
<script>
new Vue({
el:"#app1",
data:{
"name":"用户名"
},
components:{
"componet1":{
template:"#mytemplate",
data:function(){
return {
"name":"用户名2"
}
}
}
}
});
</script>
路由
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/a">还是客服号码</router-link>
<router-link to="/b">核动力航母</router-link>
<!--路由出口-->
<router-view></router-view>
</div>
</body>
<script>
var index = Vue.component("index",{
template:"<h1>首页</h1>"
});
var a1 = Vue.component("a",{
template:"<h1>岁的法国昆明</h1>"
});
var b1 = Vue.component("b",{
template:"<h1>发生的和你们说了</h1>"
});
//创建一个路由
var routes1 = new VueRouter({
routes:[{
path:"/",
component:index
},{
path:"/a",
component:a1
},{
path:"/b",
component:b1
}]
});
new Vue({
el:"#app",
router:routes1
})
</script>
Vue的脚手架
- 安装脚手架
npm install -g vue-cli
- 执行
vue init webpack
询问创建项目 yes
询问vue-router yes
... no
- 运行命令
npm run dev
image.png
image.png
