Vue入门2
1.计算属性
computed:{ 定义方法，该方法必须有返回值}
<div id="app"> <!--计算属性--> <div>{{birth1}}</div> </div> //计算属性的方法必须有返回值<script> <!--初始化一个vue实例--> 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> <!--初始化一个vue实例--> 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: "<button @click='num++'>点我加一，{{num}}</button>", 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: "<div>打个招呼，我是{{name}}</div>", 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: "<button @click='num1++'>点我加一，{{num1}}</button><br>" + template: "<button @click='subIncr'>点我加一，{{num1}}</button>", //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) 引入<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<div id="app"> <span><router-link to="/login">登陆</router-link></span> <span><router-link to="/register">注册</router-link></span> <hr> <!-- 锚点，组件渲染的地方--> <router-view></router-view> <!-- <login-form></login-form>--> <!-- <register-form></register-form>--> </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> ` }
