Vue特性
数据双向绑定：
输入到vue容器中的数值自动与对应变量绑定，无需通过DOM操作来获取。
数据驱动视图:
视图或根据数据来动态变化，最常规的插值表达式:{{}}
MVVM：
Mvvm是数据驱动和双向数据绑定的核心，它把每个html差分三个部分model表示数据源，view表示页面所渲染的dom，viewmodel表示vue实例时mvvm的核心。
原理：当数据源发生变化会被viewmodel监听到，在自动渲染到页面中。表单的值发生变化也会被viewmodel监听到，并同步到model中。
Vue指令
- new Vue()用来创建一个vue实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:"#app",
data:{
message:'hello world'
}
})
</script>
</body>
</html>
-
Vue属性
vue有很多属性，
el，挂载元素，通过挂载标明vue实例来管理那些范围类的内容；
data，就是双向绑定的数据的变量定义的容器；
methods，是方法定义的容器；
mounted()，是一个vue生命周期的方法在vue实例加载后自动调用；
computed，计算属性当对数据需要计算处理时调用；
filter，过滤器用来{{}}和v-bind上，读数据进行预处理；
watch，监听器，监听数据变化如路由变化，本质时一个函数会自动执行，要监听哪个数据变化将数据作为方法名即可；若有参数，第一个表示新数据，第二个表示旧数据。（方法监听）
这几个是最常用的属性。 -
vue指令
- v-on&@
标签绑定点击事件，通过该指令可以调用vue实例中定义的方法。
<button v-on:click="func()">v-on</button>
<button @click="func()">@click</button>
- @keyup.enter
绑定键盘的enter键.esc绑定esc键
<button @keyup.enter="func()"></button>
- v-bind
数据绑定，标签中的某个属性与vue实例的数据中定义的变量绑定，从而实现动态变化。
<a v-bind:src="url"></a>
<!--简写-->
<a :src="url"></a>
<!--url是定义在data的变量，实现数据绑定-->
- v-if and v-show
条件判断和隐藏与显示
<p v-if="index > 10"></p>
<!--v-for=true就显示，否则就一隐藏；v-show同理-->
- v-for
循环，对数据循环并动态驱动视图。
<ol>
<li v-for="(item,index) in list" :key="index"></li>
</ol>
<!--list是可循环的对象，item是每一个元素，index是索引，key是，每个for的标识，用于区分每个循环项-->
- v-model
数据双向绑定，在定义即内部都可以使用data中的数据
{{ message }}
<input v-model="message"/>
<!--输入框的值会自动绑定到message并显示-->
- v-text
js的textContent(),动态插入data绑定的变量的值
<p v-text></p>
...
{
...
data:{
txt:"Hello"
}
}
- v-html
//和-text一样，只不过这里插入的是html数据
这些是最常用的属性。
Vue组件
一个vue实例有一个el属性挂载一个容器，那么如果有多个vue实例呢？如果都一一创建vue容器就太麻烦了，vue组件就可以解决，每个组件就是一个可复用的vue实例。
- 全局注册
- 组件注册
//定义组件
Vue.component('one',{
data:function(){
return{
count:0
}
},
template:'<h1>{{count}}</h1>'
})
//one是组件名，后面是一个对象，相当于一个新的vue实例，对象中定义的各个属性和方法
//注意要先将组件注册到vue中在创建vue实例，顺序不对报错：
//vue.js:634 [Vue warn]: Unknown custom element: <btn-me> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
- 引用组件
<one></one>
<!--调用组件就是组件名标签，这个标签会被替换为定义时template中的内容-->
<!--完整代码-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue组件全局注册</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<!--引用组件-->
<one></one>
</div>
<script type="text/javascript">
//定义组件
Vue.component('one',{
data:function(){
return{
count:0
}
},
template:'<h1>{{count}}</h1>'
})
//注意要先蒋组件注册到vue中在创建vue实例，顺序不对报错：
//vue.js:634 [Vue warn]: Unknown custom element: <btn-me> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
new Vue({el:'#app1'})
</script>
</body>
</html>
- 局部注册
<!--局部组测只能在该html页面使用-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue组件局部注册</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app2">
<mytest></mytest>
<ismybutton></ismybutton>
<br>
<articles></articles>
</div>
<script>
new Vue({
el:'#app2',
components:{ //注册组件
mytest:{ //组件名称
template:'<h2>注册组件</h2>' //组件模板
},
ismybutton:{
template:'<button style="width: 100px; height: 50px; background-color: #409EFF;">hello</button>'
},
articles:{
template:'<h6>文章标题</h6><br><p>内容</p>'
}
}
});
</script>
</body>
</html>
<!--利用compoments属性-->
需要注意的是每个组件的data要封装为一个函数，是为了每个组件的data单独维护。如果你的组件需要新的数据使用props属性传递数据。
单文件组件
上面的组件模拟板内容很少如何组件中的内容多就很复杂，而且也不利于数据的传递，可以把文件模板的内容提取出来形成单文件组件。以.vue为后缀。
- 单文件组件模板
<template>
</template>
<script>
export default {
data:function(){}
}
</script>
<style scoped>
</style>
<!--<template>标签就是组件的模板，里面是html内容，
<script>标签就是js语法控制模板的行为，export default是ES6语法用于向外暴露该js文件，
<style>样式语法，scoped控制样式作用范围(只在该组件生效)。
-->
//data要封装为一个函数，交予每个组件单独管理
显然和一个html页面类似，但vue组件不能单独运行，需要依托html页面，也就是和上面一样通过名称标签来调用。
- 在html中引入单文件组件
如何将vue文件引入到html中呢？import可以吗？不可以，它只能识别js文件，如何用的wepack环境（一切皆模块）就可以，现在需要用官方工具vue-loader。
vue组件：编写vue组件（my-component.vue）
//my-component.vue
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports ={
data: function() {
return {
who: 'world'
}
}
}
</script>
<style scoped>
.hello {
background-color: red;
}
</style>
html文件：（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中引入vue单文件组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--单文件vue组件解析器-->
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script>
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('../componts/my-component.vue')//加载需要使用的vue文件
}
});
</script>
</body>
</html>
四个关键点：
//引入官方vue-loader加载工具
<!--单文件vue组件解析器-->
<script src="https://unpkg.com/http-vue-loader"></script>
//当然vue.js别忘了
//导入组件的关键字httpVueLoader
httpVueLoader('../componts/my-component.vue')//加载需要使用的vue文件，括号内是相对路径
//注册组件
components: {
'my-component': httpVueLoader('../componts/my-component.vue')//组件名+解析的组件
}
//后面用一个变量代替比较好
const Mycomponent=httpVueLoader('../componts/my-component.vue')
//调用组件
<my-component></my-component> //组件注册时的命名，不是接收的命名
vue-loader的关键字是httpVueLoder（vue主键路径）也可以定义变量接收，在传递。
单文件组件没有el属性，会默认将模板的顶级顶级容器作为挂载元素，template中只能有一个顶级容器。
vue组件通信
在实际开发时一般不以html作为显示界面，而已一个顶级的vue组件作为展示界面，也就是，所有组件都导入一个根组件中，再把根组件导入html中。这样就会出现，局部注册的组件数据无法传递，vue组件通讯就是解决组件之间的数据传递问题的。
- 父组件向子组件传值（自定义属性）
不同父组件共用子组件时初始值都是一样的，那么如何在用子组件时，使用父组件的初始值呢？props属性用于向子组件传值。
在子组件的props中接收
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports ={
data: function() {
return {
who: 'world'
}
},
props:{
init:''
}
}
</script>
<style scoped>
.hello {
background-color: red;
}
</style>
父组件用属性名传递
//引入和注册就省略了这里注册的组件名为Home
<Home init="Hello home"></Home>
//这里传递的是一个静态的字符串hello home，如果想要与父组件的数据绑定使用v-bind指令即可
<Home :init="str"></Home>
props属性
//props三种定义方式
props：[‘massage’]
prop:{massage:String}
props：{massage:{default:0,type:Number,required:true}}
default最终值，type数据类型，requird必填项校验[有这项就必须填值]
- vue子组件与父组件共享数据(自定义事件)
上面时父向子传值，那么如何在用子组件中与父组件共享数据呢？$emit方法用于向父组件传值。
子组件中定义事件
子组件中 $emit发送数据
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports ={
data: function() {
return {
who: 'world'
}
},
this.emit('method',this.who) //this表示vue实例
}
</script>
<style scoped>
.hello {
background-color: red;
}
</style>
父组件中 @事件名接收
<Home @method="getData()"></Home> //用方法接收
...
{
data:function(){
son:''
}
methods:{
getData(val){
this.son=val //参数接收的就是子组件的值（who）
}
}
}
-
任意组件之间的数据共享EventBus
通过第三个中间枢纽组件进行传值，两个组件都引入这个组件，然后发送方 $.emit发送数据。接受方 $.on接受数据。
//创建eventBus.js的文件：
export default new Vue()
//one.vue：[发送方]
···
{
...
method1: function(){
bus.$emit(‘share’,this.data)
}
}
//two.vue: [接收方]
...
{
...
created: function(var){
bus.$on (‘share’,(var) =>{ //ES6箭头函数，也可以写为普通函数
this.data=val
})
}
} //在vue生命周期内监听，这里时created
//接收方，并不知道数据什么时候发过来，所以要一致处理监听状态，写在vue生命周期函数中created()
vue生命周期与生命周期函数
生命周期函数时vue实例从创建—–>运行——>销毁各个阶段所调用的函数。
动态组件
上面的组件在引用时就是名称标签引用，一旦写入就不能更改，动态组件就是，通过更改组件名动态显示不同的组件。
动态切换组件的显示与隐藏；vue内置 component标签专门用来实现动态组件的渲染。并通过 is属性控制，不同组件的切换。
<component is=”组件名”></component>
上面这个也是静态的，已经写实了，通过将 is与v-bind绑定，就可以实现动态切换了。
每次切换都是一个组件创建和销毁的过程，数据不会同步。要想数据同步需要 keep-alive标签
<keep-alive>
<component :is=”组件名”></component>
</keep-alive>
使用keep-alive标签保持切换时的运行状态，隐藏而不销毁。
keep-alive也有生命周期和生命周期函数，被缓存时：deactiveted,activeted两个生命周期函数
include属性指定那些组件可以被缓存，被移入keep-active包裹的都会缓存，exclude与起相反。
<keep-active include=”One,Two”><component is=”组件名”></component></keep-active>
只有One,Two组件在移入时会缓存，其他都有创建和销毁的过程。
vue插槽
不管时通讯还是动态组件共享数据都是通过标签的属性来传递的标签内部没有任何内容，其实标签内部也可以传递数据。通过内部传递数据就是 vue插槽。
<Home>Hello</Home>
<Home><h1>Hello</h1></Home>
显然这个内容的接收着只能是子组件，vue允许开发着在vue组件的任何地方预留空位，定义为插槽。引用时可插入数据。
son.vue
//slot用于声明一个插槽
<slot name=”one”></slot>
father.vue
//v-slot指定插入的位置
<One>
<template v-slot:one><h1>Hello World</h1></template>
</One>
//就会将<slot name=”one”></slot> 替换为<h1>Hello World</h1>
但 v-slot只能定义在 components和template中所以要用template包裹。
slot标签中也可以自定义属性，用v-slot接收：
<slot name=”one” message=”Hello”></slot>
<template v-slot:one=”val”><h1>{{val}} </template>
val时自定义变量，为对象类型，val={message:”Hello”} 自定义的属性也可以用v-bind传递vue的数据。
vue实现DOM操作
在vue中由于数据的双向绑定和数据驱动视图的属性，使得不需要再操作DOM元素。若要操作DOM借助 ref属性。
vue自带 $refs属性用来操作DOM对象，再标签中加入ref=”name”,就为该标签添加标识并存储在vue内置对象
$refs中，通过this.refs.name获取DOM对象并用js语法操作它。
<div id=”app”>
<h1 ref=”hello”>Hello World</h1>
</div>
vue实例中：
this.$refs.hello=<h1 ref=”hello”>Hello World</h1> //即DOM元素
this.$refs.hello.style.color=”red”;
自定义vue属性
当某个方法或对象在vue中频繁使用时，可以将其注册为vue的属性。这样就可以通过this调用而不用每次重写。
Vue.prototype.[Object || Function ]=Object || Function
//Jquery注册为全局使用，就不用每次都引入
Vue.prototype.jquery=$
vue路由
通过点击链接，监听url变化，并通过路径对应的组件动态切换组件。这样就实现了，页面的局部变化，不用加载整个页面，和动态组件类似。
动态组件子html的应用，需要官方路由工具 vue-router使用关键字 VueRouter创建路由实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="../js/vue.js"></script>
<!--单文件vue组件解析器-->
<script src="https://unpkg.com/http-vue-loader"></script>
<!--vue路由-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--引入ElemnetUI-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--导入axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style type="text/css">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
/*
为vue路由去除下划线
*/
.router-link-active{
text-decoration: none;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 950px; border: 1px solid #eee">
<!--左侧导航栏-->
<el-aside width="240px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1']" :unique-opened="true">
<router-link to="/"><el-menu-item index="2" >
<i class="el-icon-menu"></i><span slot="title" style="width:60px">首页</span>
</el-menu-item></router-link>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>关于我们</template>
<el-menu-item-group>
<router-link to="/profile"><el-menu-item index="2-1">公司简介</el-menu-item></router-link>
<router-link to="/culture"><el-menu-item index="2-2">企业文化</el-menu-item></router-link>
<router-link to="/honor"><el-menu-item index="2-3">荣誉资质</el-menu-item></router-link>
<router-link to="/development"><el-menu-item index="2-4">发展历程</el-menu-item></router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>产品中心</template>
<el-menu-item-group>
<router-link to="/product"><el-menu-item index="3-1">产品管理</el-menu-item></router-link>
<router-link to="/productcount"><el-menu-item index="3-2">产品种类、材质、空间管理</el-menu-item></router-link>
</el-menu-item-group>
</el-submenu>
<router-link to="/new"><el-menu-item index="4">
<i class="el-icon-menu"></i><span slot="title">新闻、保养管理</span>
</el-menu-item></router-link>
<router-link to="/join"><el-menu-item index="5">
<i class="el-icon-menu"></i><span slot="title">加盟管理</span>
</el-menu-item></router-link>
<router-link to="/contact"><el-menu-item index="6">
<i class="el-icon-menu"></i><span slot="title">联系人管理</span>
</el-menu-item></router-link>
<router-link to="/comment"><el-menu-item index="7">
<i class="el-icon-menu"></i><span slot="title">留言管理</span>
</el-menu-item></router-link>
</el-menu>
</el-aside>
<!--中部内容显示区-->
<el-container>
<el-header style="text-align: right; font-size: 12px">
<span style="float: left;font-size: 20px"><b>{{menu}}</b></span>
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>刷新</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span><b>bolen</b></span>
</el-header>
<el-main>
<!--main-->
<!--组件显示区-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
<!--路由-->
<script>
//导入各个组件，组件的内容就写出来了，按照模板来
const Display=httpVueLoader("../components/first.vue");
const Profile=httpVueLoader("../components/second.vue");
const Culture=httpVueLoader("../components/third.vue");
const Honor=httpVueLoader("../components/four.vue");
const Development=httpVueLoader("../components/five.vue");
const Product = httpVueLoader("../components/six.vue");
const ProductCount=httpVueLoader("../components/seven.vue");
const New=httpVueLoader("../components/eight.vue");
const Join=httpVueLoader("../components/night.vue");
const Contact=httpVueLoader("../components/ten.vue");
const Comment=httpVueLoader("../components/eleven.vue");
const routes = [ //设置路由映射，组件和uri地址的对应关系
{
path: '/',
component: Display
},
{
path: '/profile',
component: Profile
},
{
path: '/culture',
component: Culture
},
{
path: '/honor',
component: Honor
},
{
path: '/development',
component: Development
},
{
path: '/product',
component: Product
},
{
path: '/productcount',
component: ProductCount
},
{
path: '/new',
component: New
},
{
path: '/join',
component: Join
},
{
path: '/contact',
component: Contact
},
{
path: '/comment',
component: Comment
},
]
const router = new VueRouter({ //VueRouter关键字创建路由实例
routes
})
new Vue({
el:'#app',
router, //将路由实例挂载到vue实例，（交由vue管控）
data:{
menu:'欢迎!',
},
//监听路由变化
watch:{
$route(to){ //vue内置$route方法获取url地址
//console.log(to.path);
if (to.path ==='/'){
this.menu='首页'
}
}
}
});
</script>
</body>
</html>
五个重点：
- 导入vue-router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--vue.js和vue-loader别忘了-->
- VueRouter创建路由实例
const routes=[
{path:'',cpmponent:'',redirect:''} //redirect是重定位，需要就写，不需要不写
]
const router = new VueRouter({ //VueRouter关键字创建路由实例
routes
})
//path是地址，component是组件名称，routes是一个列表，将映射注册到路由时用{}包裹。
- 将路由实例注册到vue实例中
new Vue({
el:'#app',
router, //将路由实例挂载到vue实例，(交由vue管控)
});
- 指定的内容添加路由链接router-link 并用 to指定路由地址
<router-link to="/product">
<el-menu-item index="3-1">产品管理</el-menu-item>
</router-link>
//关键字<router-link>标签，to指定地址
- router-view指定显示区域
<el-main>
<!--main-->
<!--组件显示区-->
<router-view></router-view>
</el-main>
//所有组件都会在router-view中显示和切换
路由嵌套children（禁止套娃。。。直接上代码）
cosnt routes=[
{
path:’/home’,
component:’Home’,
children:[ //children属性声明子组件路由
{path:’xxx’,component:’’} //内部对象映射子组件的路由规则，path路径前没有/
] //children和routes一样是数组，
}
]
//关键字children
动态路由匹配
router-link就相当于a标签，看一个小实例：
路由标签只是改变了地址栏，a标签也可以做到，a标签是可以传递参数的，路由标签也可以。
<a href="#/home?name=xxx&password=xxx">传参</a>
<a href="#/home/1">传参</a>
<router-link to="/home?name=xxx"></router-link>
<router-link to="/home/1"></router-link>
路由映射在定义是要与to的内容一样，但是如果路由定义为静态的话就没有多大意义，动态路由中通过 😗 把可变的部分定义为参数，并通过 $route(路由对象）接收，以提高复用性。【意外打出个撅嘴，好神奇不想删了，英文的冒号加星号】它表示 ： 。
{path:’/page/:count’,component:’Home’}
//这个不管穿过来的什么都可以赋值给count
//在通过$route的vue内置路由对象就可以获取值了
$route的结构如下：
获取这个对象再获取path的值就可以了，上面是通过 /value的方式传值，如果用 ?key=value&key1=value1 的方式呢？
$route还有query对象用它获取。具体就不说了，用console打印一下就看出来了。
vue-cli
再开发的过程中，并不清楚，上面内容该写道哪，vue单文件组件写在哪个目录，怎样再组件中导入组件，写好了如何打包发布等。vue-cli结合就webpack，形成vue开发的标准化工具。只需要几个简单的命令就能构建工程化项目，从而使开发着只关注于开发，而不用考虑如何构建项目，导入模块的问题。
docs命令操作：
- 安装node配置环境变量
node -v || npm -v 查看是否配置成功。 - 安装vue-cli
Vue-cli是全局包，使用npm install -g @vue-cli命令安装到自己电脑上（一次安装之后都可以使用） - 基于vue-cli创建工程化项目
vue create 项目名称
node_modules第三方方包额文件夹，public是外部可以访问的文件夹，里面的index.html就是spa入口程序。Src源代码目录，.gitignore是发布git的忽略配置文件，package-lock.json记录第三方包在包项目的位置，便于引入，package.json记录项目的信息，用来那些包，版本，管理开发包，生产包，命令等。
src源代码目录
assets存放静态资源的文件夹，如css样式文件，图片资源等；components是vue组件存放目录；main.js是项目的入口文件（相当于webpack的entry的index.js）App.vue是项目的根组件，展示组件（展示部分并不是写在index.html中，它只是将App.vue引入[vue组件不能单独运行，须嵌入html中]，就是html页面写展示的逻辑，只引入根vue，自定义vue组件时，导入根vue[App.vue]就可以了）
-
npm run 项目名
该命令运行项目，先docs命令切换到该目录下。 -
vue build 项目名
写完后打包发布，产生dist目录，所需文件。 -
vue ui 可视化操作
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/156319.html
