Vue学习心得
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
mvvm
●Model:模型层，在这里表示JavaScript对象
●View:视图层,在这里表示DOM (HTML操作的元素)
●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
●ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
●ViewModel能够监听到视图的变化，并能够通知数据发生改变
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处
●低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
●可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
●独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
●可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。核心是实现DOM监听与数据绑定
指令带有前缀v-
悬停显示信息
悬停
if判断
<div id="app">
<h1 v-if="type==='A'">Ah1>
<h1 v-else-if="type==='B'">Bh1>
<h1 v-else>Noh1>
div>
for
<div id="app">
<li v-for="text in allTexts">
{{text.message}}牛
li>
<span v-bind:title="allTexts[0].message">悬停span>
div>
<script>
let vm = new Vue({
el: "#app",
data: {
allTexts: [
{message: "1"},
{message: "2"},
{message: "3"},
]
}
});
script>
v-on指令监听dom事件，绑定一个事件，简写为@
<div id="app">
{{message}}
<button v-on:click="greet()">点击button>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
//model：数据
data:{
message:"洛尘"
},
methods:{ //方法必须定义在Vue的Method对象中
greet:function (){
alert(this.message);
}
}
});
script>
双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
<div id="app">
input the content:<input type="text" v-model="message"/>{{message}}
<br>
性别：
<input type="radio" name="sex" value="man" v-model="luo"/>男
<input type="radio" name="sex" value="woman" v-model="luo"/>女
<p>yuo choose is {{luo}}p>
<br>
<select v-model="selected">
<option value="" disabled>please chooseoption>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span style="color: aqua">selected:{{selected}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
//model：数据
data:{
message: "洛尘,hello",
luo: "",
selected: ""
}
});
script>
Vue组件
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
<div id="app">
<luo v-for="item in items" v-bind:i="item">luo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
/*定义一个vue组件*/
Vue.component("luo", {
props: ['i'],
template: '{{i}} '
});
var vm = new Vue({
el:"#app",
//model：数据
data:{
items:["java","linux","html"]
}
});
script>
Axios异步通信
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:
●从浏览器中创建XMLHttpRequests
●从node.js创建http请求
●支持Promise API [JS中链式编程]
●拦截请求和响应
●转换请求数据和响应数据
●取消请求
●自动转换JSON数据
●客户端支持防御XSRF (跨站请求伪造)
<div id="vue" v-clock>
<div>{{info.name}}div>
<a v-bind:href="info.url">点我到百度链接a>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js">script>
<script>
var vm = new Vue({
el: "#vue",
//和data: 不同 属性：vm
data() {
return {
info: {
name:null,
url:null,
adresss:null,
},
}
},
mounted() {
//钩子函数 链式编程 ES6新特性
axios.get("../data.json").then(response => (this.info=response.data)); //../返回上一级
}
})
script>
data.json
{
"name": "luo",
"age": "18",
"sex": 1,
"url":"https://www.baidu.com",
"address": {
"street": "缇香郡",
"city": "宁波",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
{
"name": "cqh video",
"url": "https://www.4399.com"
}
]
}
计算属性
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存!
<div id="app">
<p>c1:{{getTime()}}p>
<p>c2:{{getTime2}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "hello luo"
},
methods: {
getTime: function () {
return Date.now();
}
},
//计算属性
computed: { //计算属性 methods和computed方法不能重名，重名之后只会调用methods方法
getTime2: function () {
this.message; //当message修改时，时间戳修改，相当于缓存
return Date.now();
}
}
});
script>
在方法的值发生变化时，缓存会刷新
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
插槽
使用元素作为承载分发内容的出口，称其为插槽，可以应用在组合组件的场景中;
v:bind: 可以缩写为一个:
v-on: 可以缩写为一个@
自定义事件
通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this.$emit(‘自定义事件名’,参数)
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;
主要的功能:
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
new Vue({
el: ‘#app’,
components: { App },
template: ‘’
})
webpack
vue-router
Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为
安装vue-router
npm install vue-router --save-dev
安装完之后去node_modules路径看看是否有vue-router信息
安装路由,在src目录下,新建一个文件夹 : router,专门存放路由
index.js(默认配置文件都是这个名字)
/**
- vue router的配置
*/
//导入vue和vu-router
import Vue from ‘vue’
import VueRouter from ‘vue-router’;
//导入组件
import Content from “…/components/Content”;
import Main from “…/components/Main”;
//安装路由
Vue.use(VueRouter)
//配置导出路由
export default new VueRouter({
routes: [
//Content组件
{
// 路由的路径 相当于@RequestMapping
path: ‘/content’,
name: ‘content’,
// 跳转的组件
component: Content
},
//Main组件
{
// 路由的路径
path: ‘/main’,
name: ‘main’,
// 跳转的组件
component: Main
}
]
});
在main.js中配置路由
import Vue from ‘vue’
import App from ‘./App’
import router from “./router”;//自动扫描里面的路由配置
Vue.config.productionTip = false
new Vue({
el: ‘#app’,
//配置路由
router,
components: {App},
template: ‘’
})
在APP.vue中使用路由
vue-router
首页 内容页npm run dev启动测试
路由嵌套
routes:[
{
path:’/main’ ,
component:Main,
// 写入子模块
children: [
{
path: ‘/user/profile’,
component: UserProfile,
}, {
path: ‘/user/list’,
component: UserList,
},
]
},
{
// 默认路由的路径
path: ‘/’,
// 跳转的组件
redirect: ‘/login’ //重定向
},
创建工程
vue+elementUI实战
根据之前创建vue-cli项目一样再来一遍 创建项目
1． 创建一个名为 hello-vue 的工程 vue init webpack hello-vue
2． 安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
进入工程目录
cd hello-vue
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -S
安装依赖
npm install
安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
启动测试
npm run dev
npm命令
参数传递
第一种取值方式
1.修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
{
path: ‘/user/profile/:id’,
name:‘UserProfile’,
component: UserProfile
}
2.传递参数
此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；
个人信息
3、在要展示的组件Profile.vue中接收参数 使用 {{$route.params.id}}来接收
个人信息
{{$route.params.id}}路由模式
路由模式有两种
hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login
修改路由配置
export default new Router({
mode: ‘history’,
routes: [
]
});
路由钩子
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
export default {
name: “UserProfile”,
beforeRouteEnter: (to, from, next) => {
console.log(“准备进入个人信息页”);
next();
},
beforeRouteLeave: (to, from, next) => {
console.log(“准备离开个人信息页”);
next();
}
}
参数说明：
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
vue生命周期