vue（二）
绑定事件指令 v-on
<button v-on:click="num++">点击1</button>
<button @click="num++">点击2</button>
<button @click="countSum()">点击3</button>
<button @click="countSum">点击4</button>
<button @click="say('今天天气好冷了')">点击5</button>
<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:{
num:0,
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
<body>
<div id="app">
<input type="text" v-model="msg"/>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:''
},
methods:{
},
watch:{
msg(newVal,oldVal){
//可以获取上次改变的值-- 记录日志 --用处不是很大
console.log(newVal,oldVal);
}
}
})
</script>
</body>
Vue 组件
(1)以前组件: Component --easyui 组件 datagrid tabs menu…panel,dialog
Vue组件: 自定义的代码块或者自定义标签
(2)组件有什么用:
(1)可以反复使用
(2)完成一些功能
(3)vue里面组件分类
全局组件:任意地方都可以使用,任意挂载的标签都使用
局部组件:只能在当前的挂载的标签里面的使用
vue组件是vue里面比较重要知识点
<body>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app2">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<script>
//全局组件
Vue.component("mycomponet1",{
template:"<h1>这个字好大1111111</h1>"
});
var mycomponet2={
template:"<h1>这个字好大222222</h1>"
}
Vue.component("mycomponet2",mycomponet2);
new Vue({
el:"#app1"
});
new Vue({
el:"#app2"
});
</script>
</body>
局部组件
<body>
<div id="app1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="app2">
<mycomponet1></mycomponet1>
</div>
<script>
new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"<h2>这是一个局部的组件111</h2>"
},
"mycomponet2":{
template:"<h2>这是一个局部的组件222</h2>"
}
}
});
new Vue({
el:"#app2"
});
</script>
</body>
组件里面模板写法
<body>
<div id="app1">
<mycomponet1></mycomponet1>
</div>
<!--<template id="mytemplate">
<h3>这是一个template写法1</h3>
</template>-->
<script type="text/template" id="mytemplate">
<h1>template标签中的htmlssssssssssssssss</h1>
</script>
<script>
// 写法一:直接template写字符串
/* new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"<h2>这是一个局部的组件111</h2>"
}
}
});*/
//写法二:
new Vue({
el:"#app1",
components:{
"mycomponet1":{
template:"#mytemplate"
}
}
});
</script>
模板里面的数据必须函数
<div id="app1">
<mycomponet1></mycomponet1>
{{name}}
</div>
<template id="mytemplate">
<form>
{{name}}<input type="text" />
</form>
</template>
<script>
new Vue({
el:"#app1",
data:{
"name":"用户名1111"
},
components:{
"mycomponet1":{
template:"#mytemplate",
data:function(){
return {
"name":"用户名"
}
}
}
}
});
</script>
</body>
</html>
路由
(1)安装 路由
npm install vue-router
npm uninstall vue-router
(2)在页面引用vue-router.js文件
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
(3)使用
<body>
<div id="app1">
<!--相当于a标签 long 龙哥的组件-->
<router-link to="/">首页</router-link>
<router-link to="/long">龙哥</router-link>
<router-link to="/cheng">成哥</router-link>
<router-link to="/jinbo">金箔哥</router-link>
<!-- 路由出口-->
<router-view></router-view>
</div>
<script>
//定义组件
var index = Vue.component("index",{
template:"<h1>首页</h1>"
});
var longCp = Vue.component("long",{
template:"<h1>大家好,我是渣渣龙</h1>"
});
var chengCp = Vue.component("cheng",{
template:"<h1>大家好,晨晨渣</h1>"
});
var jinbo = Vue.component("jinbo",{
template:"<h1>大家好,金箔哥</h1>"
})
//创建一个路由
var routes1 = new VueRouter({
routes:[{
path:"/",
component:index
},{
path:"/long",
component:longCp
},{
path:"/cheng",
component:chengCp
},{
path:"/jinbo",
component:jinbo
}]
});
//把路由挂载到vue对象上面去
new Vue({
el:"#app1",
data:{
"name":"用户名1111"
},
router:routes1
});
</script>
</body>
Vue的脚手架
Vue脚手架 --就是前端项目的模板(已经就有一些内容)
使用脚手架
(1) 安装脚手架
npm install -g vue-cli
(2)创建一个项目
(3)执行 vue init webpack
询问创建项目 yes
询问vue-router yes
… no
(4)运行命令
npm run dev
1872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
