1.v-on绑定事件指令
1.1使用方式
①v-on:事件名称=“执行代码”–详见 点击 1
②@缩写(直接使用@+事件名=“执行代码”)–详见点击2
③可调用methods里的方法,且方法 可加括号(),也可不加括号–详见点击3,4
④传参直接写在方法的括号里 即可–详见点击5
<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>
2.计算属性
作用:可以代替复杂的表达式
<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>
3.watch(类似于一个listener监听器)
3.1作用:控制台的内容会 随着里输入的值的改变而改变(强调一个联动性),一起输出旧值和新值
<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>
4.组件Component
4.1作用:创建好后可反复供 使用;类似于函数完成一些 功能
4.2组件分类:
4.2.1全局组件:任意地方都可以使用,任意挂载的标签都能使用的组件(p.s:挂载即el:""内所对应的id或者class值)。此处介绍了 两种定义全局组件的方式:
①:直接通过Vue.component定义
②通过定义变量,然后该变量当作参数传入 Vue.component
<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>
4.2.2局部组件:只能在当前的挂载的标签里面的使用。所有的局部组件都写在components中
<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>
4.3组件里的模板写法
4.3.1写法一:直接在 template内写字符串
4.3.2写法二:在
4.3.3写法三:在标签里引入
<div id="app1">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
<mycomponent3></mycomponent3>
</div>
<template id="template3">
<h1>Test3...........</h1>
</template>
<script type="text/template" id="template">
<h1>Test2.............</h1>
</script>
<script type="text/javascript">
new Vue({
el:"#app1",
components:{
/*局部template写法一*/
mycomponent1: {
template:"<h1>Test1..........</h1>"
},
/*局部template写法二--在<script>标签内引入*/
mycomponent2: {
template: "#template"
},
/*局部template引入方式三--<template>标签里引入*/
mycomponent3:{
template:"#template3"
}
}
});
</script>
4.4template模板里的数据必须是函数的形式
<div id="app1">
<mycomponent1></mycomponent1>
{{name}}
</div>
<template id="template">
<form>
{{name}}<input type="text"/>
</form>
</template>
<script type="text/javascript">
new Vue({
el:"#app1",
data:{
name:"张三"
},
components:{
mycomponent1: {
template:"#template",
/*template里的此处的data必须是函数的形式才行 */
data:function(){
return{
name:"用户名"
}
}
}
}
});
</script>
5.路由Router
5.1作用 :用于定位到一个组件,类似 html里的 < a href="" >的作用
5.2 使用方式:
5.2.1安装路由
安装路由 npm install vue-router
卸载路由 npm uninstall vue-router
5.2.2在html页面中引入vue-router.js文件
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
5.2.3使用
<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>
6.Vue-cli脚手架:
Vue脚手架 --就是前端项目的模板(已经就有一些内容)
6.1使用方式
6.1.1安装
npm install -g vue-cli
6.2.2创建一个静态web项目
此处可以选择工具自行创建,就不贴图了
6.2.3执行命令
在控制台执行命令:vue init webpack
此处只要看到finished即创建完毕
6.2.4运行脚手架
通过 npm run dev即可启动服务器,然后输入控制台中提示的路径及端口号就能进入相应页面了
(p.s:想要关闭服务的话,只需要 按住 键盘上的 Ctrl+C即可关闭服务器)