1.计算属性
computed:{ 定义方法，该方法必须有返回值}
<div id="app"> <div>{{birth1}}div> div> //计算属性的方法必须有返回值<script> const app =new Vue({ el: "#app", data: { birthday:1529032123201, }， //计算属性的方法必须有返回值 computed:{ birth1: function () { const date=new Date(this.birthday); return date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay(); } } }) script>
2.监听：watch
<div id="#app"> <input type="text" v-model="search"> div> <script> const app =new Vue({ el: "#app", data: { search:"" }, watch:{ search(newVal,oldVal){ console.log(newVal,oldVal); } } }) script>
3.组件
3.1.全局组件
<div id="app"> <counter>counter> div> <script>
//子组件
//counter 为组件名 Vue.component("counter",{ //template 模板 template: "", data(){ return { num:0 } } })
//父组件
new Vue({
el: "#app",
}) script>
3.2.局部组件
<div id="app"> <hello1>hello1> div> body> <script src="node_modules/vue/dist/vue.js">script> <script> //局部组件，子组件，名为hello const hello={ template: "打个招呼，我是{{name}}", data(){ return { name: "刘德华" } }, } //父组件 new Vue({ el: "#app",
components:{
//使用子组件： 键值对形式： 组件名 ： 子组件名 hello1:hello } }) script>
3.3.父子传递
1) 父向子传递数据（num）
父组件在调用子组件（counter）时自定义属性（num1）（属性名任意，属性值为要传递的数据(num)，动态），子组件通过props接收父组件的数据
2)子向父传递方法（incr()）
父组件在调用子组件（counter）时自定义事件（@incr1）
（事件名任意，里面的方法名未要传递的方法名），
再在子组件里定义点击事件方法（subIncr）,
在subIncr方法中调用父传来的方法：this.$emit("事件名incr1")
<body> <div id="app">
<counter :num1="num" @incr1="incr()">counter> div> body> <script> //父向子传递 //父组件使用子组件时，自定义属性或者事件（属性名和事件名任意，属性值为要传递的数据），子组件通过props接收父组件的数据 Vue.component("counter",{ // template: "
" + template: "", //props:["num1"] props:{ num1:{ type:Number, default:0, } }, methods:{ subIncr(){ this.$emit("incr1"); //子调用父组件方法this.$emit(父组件事件名) } } }) new Vue({ el: "#app", data:{ num:0 }, methods:{ incr(){ this.num++ } } }) script>
3.4.路由:vue-router
1）安装：使用npm安装 npm install vue-router --save
2) 引入
<div id="app"> <span><router-link to="/login">登陆router-link>span> <span><router-link to="/register">注册router-link>span> <hr> <router-view>router-view> div> body> <script src="../node_modules/vue/dist/vue.js">script> <script src="../node_modules/vue-router/dist/vue-router.js">script> <script src="js/login.js">script> <script src="js/register.js">script> <script> const router=new VueRouter({ routes:[ { path: "/login", //路由路径，通常以”/“开头 component: loginForm }, { path: "/register", component:registerForm } ] }) new Vue({ el:"#app", // components:{ // loginForm, // registerForm // }, router }) script>
//子组件 loginForm const loginForm={ //组件内的template只能有一个根标签 template:` <div> <h1>登陆页h1> 用户名: <input type="text"><br> 密 码: <input type="password"><br> <input type="button" value="登陆"> div> ` } //子组件 register const registerForm={ template:` <div> <h1>注册页h1> 用 户 名: <input type="text"><br> 密 码: <input type="password"> <br> 确认密码: <input type="password"> <br> <input type="button" value="注册"> div> ` }