- A+
所属分类：Web前端
- 1.一个基本的vue的实例
- 2.新的实例
- 3.一个实例改变另一个实例中的内容，通过给实例命名
- 4.在vue外面操作vue实例——操作属性
- 5.调用vue实例中的方法——操作方法
- 6.为vue实例设置属性
- 7.实例属性ref的用法：相当于是id
- 8.动态绑定vue实例到页面中
- 1.vue组件
- 2.vue的生命周期函数
- 3.一个页面中只有一个div，其他的都是vue组件
- 1.vue-cli骨架
- 2.详细步骤
- 3.webpack-simple模板初体验
- 1.注意template必须有一个根节点
- 2.在App.vue组件中使用另一个vue组件
- 3.组件中嵌套组件
- 1.在index.html中引入bootstrap.css
- 2.编写组件，组件中使用bootstrap
- 3.在app.vue中本地注册这些组件并使用
- 1.父传子
- 2.子组件调用父组件中的函数并传递参数
- 3.改进版的参数传递(常用)
Vue进阶
一、vue实例
1.一个基本的vue的实例
<head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1> {{title}} </h1> <button id="btn" @click="btnclick">show</button> <p v-if="showFlag">显示段落</p> {{lowercasetitle}} </div> </body> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> var v1 = new Vue( { el:"#app", data:{ title:"This is Title", showFlag:false }, methods:{ btnclick:function(){ this.showFlag=true; this.updateTitle("this is new title"); }, updateTitle:function(d){ this.title = d; } }, computed:{ lowercasetitle:function(){ return this.title.toLowerCase(); } }, watch:{ title:function(newVal,oldVal){ console.log(newVal) } } } ); </script> 2.新的实例
new Vue({ el:"#app2" }) 3.一个实例改变另一个实例中的内容，通过给实例命名
在一个实例中，通过调用另一个实例的属性，来操作其属性
var v1 = new Vue(); var v2 = new Vue({ el:"#app2", data:{}, methods:{ changeTitle:function(){ v1.title = "changed title"; } } }); 4.在vue外面操作vue实例——操作属性
setTimeout(function(){ v1.title="st title"; },2000); 5.调用vue实例中的方法——操作方法
setTimeout(function(){ v1.btnclick(); },2000); 6.为vue实例设置属性
-
vue中的实例属性
v1.$data v1.$el -
设置实例属性
var data = { arg1:"arg1 value" }; var v2 = new Vue({ el:"#app2", data:data, - 实例属性还能这么调用： v1.$data.title 相当于 v1.title
7.实例属性ref的用法：相当于是id
<div id="app"> <button ref="mybtn1" id="btn" @click="btnclick">show</button> <button ref="mybtn2" id="btn" @click="btnclick">show</button> </div> methods:{ btnclick:function(){ this.$refs.mybtn1.innerText = "tttttbbbbnnnn"; } } 8.动态绑定vue实例到页面中
mount 加载的意思
<div id="app3"></div> <script> var v3 = new Vue({ template:"<h1>hello</h1>" }); v3.$mount("#app3"); </script> 二、Vue组件
万事万物皆对象
万物皆组件
1.vue组件
Vue.componet 实现全局注册
<div id="app1"> <hello></hello> </div> Vue.component("hello",{ template:"<h1>hello</h1>" }) new Vue({ el:"#app1" }) 注意： div得是vue的实例，组件创建好后，只要被vue注册过的div里面，都能使用该组件
2.vue的生命周期函数
在控制台查看各函数的调用顺序，并调用destroy，再点改变title按钮，发现改变不了，因为已被销毁
<html> <head> <meta charset="UTF-8"> <title>生命周期</title> </head> <body> <div id="app1"> {{title}} <button type="button" @click="changeTitle">change title</button> <button type="button" @click="destroy">destroy</button> </div> </body> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({ el:"#app1", data:{ title:"this is title" }, methods:{ changeTitle:function(){ this.title= "new title"; }, destroy:function(){ this.$destroy(); } }, beforeCreate(){ console.log("beforeCreate") }, created(){ console.log("created") }, beforeMount(){ console.log("beforeMount") }, mounted(){ console.log("mounted") }, beforeUpdate(){ console.log("beforeUpdate") }, updated(){ console.log("updated") }, beforeDestroy(){ console.log("beforeDestory") }, destroyed(){ console.log("destory") } }) </script> </html> 3.一个页面中只有一个div，其他的都是vue组件
vue组件里的data必须使用function的形式对{}对象进行封装，防止对其他数据的修改。
注意，template里必须有一个根节点。
<head> <meta charset="UTF-8"> <title>component</title> </head> <body> <div id="app1"> <my-cap></my-cap> </div> <div id="app2"> </div> </body> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script> new Vue({ el:"#app2", template:"<div>aaa</div>" }); Vue.component("my-cap",{ data(){ return { status:"hellllllllo" } }, template:'<p>{{status}}<button @click="changebtn">btn</button></p>', methods:{ changebtn:function(){ this.status = "enennnnnnn" } } }); new Vue({ el:"#app1" }) </script> 改进版：提高了代码的重用性——万物皆组件
var cmp = { data(){ return { status:"hellllllllo" } }, template:'<p>{{status}}<button @click="changebtn">btn</button></p>', methods:{ changebtn:function(){ this.status = "enennnnnnn" } } } new Vue({ el:"#app1", components:{ "my-cap":cmp } }) new Vue({ el:"#app2", components:{ "cap":cmp } }) 三、vue开发模式
1.vue-cli骨架
CLI（command line interfaces ）命令行接口。在进行Vue项目开发时，可以选择不同的Vue模板进行项目的搭建，比如simple、webpack-simple、webpack、browserify/browserify-simple等；vue-cli是官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架），用于快速生成一个 vue 的项目模板。 2.详细步骤
-
下载安装node.js
https://nodejs.org/en/download/ -
在node.js的cmd组件（command prompt）中安装vue-cli
npm install vue-cli -g -
创建vue项目文件夹并打开
mkdir d:/vuedemo cd d:/vuedemo -
使用vue list命令查看当前可用的vue骨架
-
使用vue命令创建基于vue-webpack-simple骨架的项目,vue-cli-demo是项目名，过程中需要输入一些参数，回车是使用提示的值
vue init webpack-simple vue-cli-demo -
创建基于webpack骨架的项目
vue init webpack vue-cli-demo -
查阅readme.md文档
npm install #安装依赖环境 npm run dev #进入开发模式 npm run build #发布项目
3.webpack-simple模板初体验
-
1)进入到项目文件中，安装依赖环境
npm install -
2)进入开发模式
npm run dev如果提示缺少依赖东西，尝试重新 npm install，如果缺少node-sass，执行以下内容：
npm install node-sass如果npm命令无法使用，可以使用淘宝镜像http://npm.taobao.org/
操作步骤如下：
# 1. 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 2. 使用cnpm代替npm cnpm install cnpm run dev cnpm run build
-
开始组件开发
修改主组件App.vue
<template> <div> {{title}} </div> </template> <script> export default { data(){ return { title:"helloooooooo!" } } } </script> 四、编写app.vue
1.注意template必须有一个根节点
这样会报错
<template> <div> {{title}} </div> <span> </span> </template> 2.在App.vue组件中使用另一个vue组件
- 新建Home.vue
<template> <div> label: {{label}} <button @click="changeLable">btttttttn</button> </div> </template> <script> export default { data(){ return { label:"i am a label" } }, methods:{ changeLable(){ this.label = "yes a label!" } } } </script> <style> </style> - 修改main.js
定义Home.vue为组件，并设置其标签名字
import Vue from 'vue' import App from './App.vue' import Home from './Home.vue' Vue.component("app-server-home",Home) new Vue({ el: '#app', render: h => h(App) }) - 修改App.vue
直接使用在main.js中定义的组件的标签名
<template> <app-server-home></app-server-home> </template> 3.组件中嵌套组件
app内使用home，home内使用subcontent。并在home中本地注册subcontent组件。
<template> <div> <app-server-subcontent v-for="(sc,i) in 5":key="i"> </app-server-subcontent> </div> </template> <script> //本地注册 import SubContent from "./SubContent.vue" export default { components:{ "app-server-subcontent":SubContent } } </script> 五、在项目中使用bootstrap
1.在index.html中引入bootstrap.css
<head> <meta charset="utf-8"> <title>vuedemo2</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> </head> 2.编写组件，组件中使用bootstrap
编写header、footer、content组件
- header组件
<template> <div class="col-xs-12"> <header> This is Header!!! </header> </div> </template> - footer组件
<template> <div class="col-xs-12"> <footer> All Right Copy </footer> </div> </template> - content组件
<template> <div class="col-xs-12 col-sm-6"> <ul class="list-group"> <li class="list-group-item" v-for="(s,i) in 5" :key="i"> {{s}} </li> </ul> </div> </template> 3.在app.vue中本地注册这些组件并使用
<template> <div id="app"> <app-header></app-header> <app-content></app-content> <app-footer></app-footer> </div> </template> <script> //内部注册 import Footer from "Footer.vue" import Header from "Header.vue" import Content from "Content.vue" export default { components:{ "app-footer":Footer, "app-header":Header, "app-content":Content } } </script> 六、组件的全局注册
在main.js中注册组件，该组件能够在项目中的每个Vue中被使用
import Home from './Home.vue'; Vue.component("appHome",Home); 七、在组件中使用样式
在组件中定义样式，组件里的样式会影响所有组件，如何设定，让样式只作用于当前组件？
content组件中的style将会影响整个页面的元素，因此在组件的style标签里加入scoped关键字，让该样式只作用于当前组件。
<template> <div class="col-xs-12 col-sm-6"> <ul class="list-group"> <li class="list-group-item" v-for="(s,i) in 5" :key="i"> {{s}} </li> </ul> </div> </template> <script> </script> <style scoped> div{ border: 1px solid red; } </style> 八、各组件中的参数传递
1.父传子
通过父vue的标签属性传递参数：
- App.vue
<template> <div id="app"> <sub-app :myName="name"></sub-app> </div> </template> <script> //内部注册 import Sub1 from "@/subapp/sub1.vue" export default { data(){ return { name:"xiaoyu" } }, components:{ subApp:Sub1 } } </script> - sub1.vue
<template> <div> <h1>{{myName}}</h1> </div> </template> <script> export default{ props:['myName'] } </script> props后存放数组，表示可以拿多个参数。也可以改写成一个对象：
<template> <div> <h1>{{myName}}</h1> </div> </template> <script> export default{ //props:['myName'] props:{ myName:{ type:String, required:true, default:'xx' } } } </script> 2.子组件调用父组件中的函数并传递参数
- App.vue
<template> <div id="app"> <sub-app :myName="name" :ffn="changeName"></sub-app> </div> </template> <script> //内部注册 import Sub1 from "@/subapp/sub1.vue" export default { data(){ return { name:"xiaoyu" } }, methods:{ changeName:function(name){ this.name = name } }, components:{ subApp:Sub1 } } </script> - sub1.vue
<template> <div> <h1>{{myName}}</h1> <button type="button" @click="doClick" >点我</button> </div> </template> <script> export default{ props:{ myName:{ type:String, required:true, default:'xx' }, ffn:{ type:Function } }, methods:{ doClick:function(){ this.ffn("xiaohe"); } } } </script> 3.改进版的参数传递(常用)
从下往上的事件发射
- sub1.vue
doClick:function(){ //this.ffn("xiaohe"); this.$emit('newName','xiaoliu'); } - App.vue
<sub-app :myName="name" @newName="name=$event"></sub-app> 
