学习心得|Vue学习心得学习心得|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判断

A B No

for

{{text.message}}牛 v-bind:title="allTexts[0].message">悬停 > let vm = new Vue({ el: "#app", data: { allTexts: [ {message: "1"}, {message: "2"}, {message: "3"}, ] } });

v-on指令监听dom事件，绑定一个事件，简写为@

{{message}}

src="http://img.readke.com/220719/0Q12L364-0.jpg"> > var vm = new Vue({ el:"#app", //model：数据 data:{ message:"洛尘" }, methods:{ //方法必须定义在Vue的Method对象中 greet:function (){ alert(this.message); } } });

双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

input the content:{{message}} 性别：男女 yuo choose is {{luo}} v-model="selected"> style="color: aqua">selected:{{selected}}

src="http://img.readke.com/220719/0Q12L364-0.jpg"> > var vm = new Vue({ el:"#app", //model：数据 data:{ message: "洛尘,hello", luo: "", selected: "" } });

Vue组件
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

src="http://img.readke.com/220719/0Q12L364-0.jpg"> > /*定义一个vue组件*/ Vue.component("luo", { props: ['i'], template: '{{i}}' }); var vm = new Vue({ el:"#app", //model：数据 data:{ items:["java","linux","html"] } });

Axios异步通信
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:
●从浏览器中创建XMLHttpRequests
●从node.js创建http请求
●支持Promise API [JS中链式编程]
●拦截请求和响应
●转换请求数据和响应数据
●取消请求
●自动转换JSON数据
●客户端支持防御XSRF (跨站请求伪造)

{{info.name}} 点我到百度链接

src="http://img.readke.com/220719/0Q12L364-0.jpg">src="http://img.readke.com/220719/0Q12IO4-4.jpg"> > 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)); //../返回上一级 } }) 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" } ] }

计算属性
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数; 简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已; 可以想象为缓存!

c1:{{getTime()}} c2:{{getTime2}}

src="http://img.readke.com/220719/0Q12L364-0.jpg"> > 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(); } } });

在方法的值发生变化时，缓存会刷新
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
插槽
使用元素作为承载分发内容的出口，称其为插槽，可以应用在组合组件的场景中;
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: ‘’
})
【学习心得|Vue学习心得】在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}} 第二种取值方式使用props 减少耦合 1.修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性 { path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true } 2.传递参数和之前一样在Main.vue中修改route-link地址 3.在Profile.vue接收参数为目标组件增加 props 属性个人信息 {{ 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生命周期