概述
- Vue被设计为可以自底向上逐层应用，核心库只关注视图层，即SOC（关注点分离原则），视图即展示给用户看的东西，刷新后台给的数据（HTML，CSS，JS）
- 网络通信：axios
- 页面跳转：vue-router
- 状态管理：vuex
- Vue-UI：ICE
- 前端模块打包工具：webpack，主要作用是打包，压缩，合并及按序加载
- MVVM(Model view viewModel )
初识Vue
先导入包：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" class="app"> //不一定是div标签，也可以使用其他的双标签，不包括<html>和<body>，但是建议使用div标签，因为div没有任何的样式
{{ message }}
</div>
var app = new Vue({ // 创建Vue 的实例
el:"#app" // "#"是css的id选择器，也可以使用类选择器：".app"，或者是标签选择器："div"
data:{
message:"数据"
}
});
Vue七大常用属性
- el属性：挂载点，用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符
- data属性：数据对象，用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
- template属性：用来设置模板，会替换页面元素，包括占位符。用到了双向数据绑定，即Vue的核心，如果后台数据改变，由于Vue的双向绑定，视图也会自动变化。当视图发生变化的时候，数据也会跟着同步变化。
- methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中
- render属性：创建真正的Virtual DOM
- Computed属性：计算属性 -->通常用在对一些数据需要变化后展示使用。计算出来的结果，保存在属性中，内存中运行，虚拟DOM。计算属性和methods类似，区别在于属性，即计算属性中定义的函数在调用时，以属性的方式调用。并且methods中的方法一直在更新，而计算属性中的方法只有当值发生改变时，方法整体才会重新更新，有点类似于缓存。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销。计算属性有get和set方法，一般不设置set方法
computed:{ name: function(){ }}，在调用时不加括号 - Watch属性：watch:function(new , old){}。监听data中数据的变化。两个参数，一个返回值，一个返回旧值
指令
<v-text>：显示文本数据，但是会覆盖标签内其他的文本数据<v-html>：如果是文本数据，效果和上面一样，但如果是html数据，就会被解析出来<v-on>：为元素绑定事件。可以简写为@。事件绑定的方法写成函数调用的形式，可以传入自定义参数。事件的后面跟上.修饰符可以对事件进行限制。例如@keyup.enter表示回车键抬起时触发事件。
例子：
<div id="app">
<input type="button" value="事件绑定" v-on:事件名="方法">
</div>
v-show：根据表达值的真假，切换元素的显示和隐藏。可以写布尔值或表达式，无论写什么都会被解析为布尔值。常用于广告、遮罩层等v-if：根据表达值的真假，切换元素的显示和隐藏（操作DOM元素）v-bind：动态绑定属性值。设置元素的属性，可以简写为:
<img v-bind:src=”imgURL" >，这里的imgURL必须要用v-bind绑定，不然无法解析
<h2 v-bind:class="{类名1: boolean, 类名2: boolean}"></h2>，动态绑定class属性，键值对形式，当布尔值为ture时才激活
<h2 :style="{key(css属性名) : value(属性值)}"></h2>v-for：响应式的根据数据生成列表结构。index可以不用
<li v-for="(cp, index) in campus"> {{ cp }} {{ index }} </li>v-model：获取和设置表单元素的值（双向数据绑定）
组件
定义一个组件：Vue.component(“name”, {props: 接收参数}, template: 定义模板);
组件是可复用的Vue实例，可以理解为标签，通常一个应用会以一颗嵌套的组件树的形式来组织：
例如：网页的页头、侧边栏、内容区等组件，每个组件又包含了其他的像导航链接、博文之类的组件。
- 全局组件是在
js中注册的，而局部组件是在vue实例中注册的，局部组件只能在该vue实例中使用 - 组件内部不能直接访问Vue实例数据，即子组件不能引用父组件的数据。所以组件有自己存放数据的位置–>
Vue.component(template: '', data(){return { 名称: 值} } )，组件中的data是一个函数，必须要有返回值 - 父子组件的通信：1. 通过props向子组件传递数据。当父组件要用
v-bind绑定时，目前的Vue不支持驼峰名。例如：cInfo 要写成 c-info形式。2. 通过事件向父组件发送信息，$emit
插槽
定义：组件的插槽是为了让封装的组件更加具有扩展性
<template>... <slot><button>按钮<button></slot></template>，在调用时，如果不往插槽中传东西的话， 就默认使用按钮插槽。如果有多个值同时放入到组件进行替换时，一起作为替换元素。在创建插槽时，有name属性，来确保调用哪个插槽
- 作用域插槽：
假如
- pLanguages 在vue实例中
- 需求是在app的域中的子组件通过插槽拿到pLanguage的值
webpack
- 前端模块化：
- 前端模块化的常用方案有，AMD、CMD、CommonJS、ES6等，但是浏览器一般不支持CommonJS
- 在ES6之前，如果想要模块化开发，就必须借助其他的工具，才可以模块化开发，目前一些浏览器也不支持ES6
- 在模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包
- webpack的一个核心就是可以模块化开发，并处理模块间的依赖关系
- 不仅仅是JS文件，CSS、图片、json文件等等都会被webpack当作模块来使用
- 安装
- 安装node.js
- 全局安装webpack，
npm install webpack@3.6.0 -g - 局部安装webpack，
npm install webpack@3.6.0 --save-dev，--save-dev是开发时依赖，项目打包后不需要继续使用的
- 打包
- 第一种方式在终端输入
webpack ./src/main.js ./dist/bundle.js：将main.js打包到bundle.js - 第二种是配置文件的方式，创建
webpack.config.js文件，在文件中配置
const path = require('path') // 依赖于node
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'), // 这里是绝对路径，需要动态获取路径。
//这里表示路径拼接，`__dirname`表示`webpack.config.js`的路径。
filename: 'bundle.js'
},
}
然后在终端输入webpack即可
在实际开发中，一般在package.json的scripts中将build映射为webpack，然后在终端使用 npm run build进行打包
- loader：使webpack可以打包css、png等等文件，参考webpack官网
路由（vue-router）
官方网站：https://router.vuejs.org/zh/
- 开发步骤
- 导入路由对象，并且调用
Vue.use(VueRouter) - 创建路由实例，并且传入路由映射配置
- 在Vue实例中挂载创建的路由实例
<router-link>
- 属性：
tag：指定<router-link>渲染成什么组件，例如按钮等等
replace：不会留下history记录
active-class：对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class的值可以修改默认的名称
router-view：相当于显示的占位符
Vuex，一般定义的文件夹名为store
官方解释：是一个专为Vue.js应用程序开发的状态管理模式
实际上就是把需要多个组件共享的变量全部存储在一个对象里，然后将这个对象放在Vue实例中，让其他组件可以使用
开发步骤
- 划分目录结构
- assets：放资源文件
– img
– css - common
- components，放公共组件
– common 放其他项目也可以使用的公共组件
– content - network
- router
- store
- views
- 引用两个css文件
npm install --save normalize.css，normalize.css可以把css的语法规范化base.css
- vue.config.js和.editorconfig
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
