Vue学习-初级

1 变量声明

（1）let（变量）
（2）const(常量)

注： vue实现了数据和界面分离

2 vue对象

（1）el属性：该属性决定了Vue对象管理哪一个元素
（2）data属性：存储数据
（3）methods：定义方法
（4）计算属性：computed，与methods类似，引用不需要加（）
注：计算属性和方法的区别
计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生改变时才会重新求值
方法绑定数据只要被调用，方法将总会再次执行函数。
计算属性相对节省资源性能
（5）filters：可以直接将参数进行传递 加(参数|方法)使用
（6）components：注册组件

3 指令

（1）v-on：事件绑定，比如点击、拖拽、键盘事件
简写方式（也叫语法糖）为：@
注：
1、事件监听时若调用函数没有参数，可以省略括号。
2、当需要参数时省略括号，会默认将浏览器产生的event事件对象作为参数传入到方法中。
3、当需要event对象又需要其他参数时，使用$event可以获得event对象

v-on的修饰符：
（1）.stop：阻止事件冒泡
（2）.prevent：阻止默认事件
（3）监听键盘的点击：例如：@keyup.enter
（4）.once：只触发一次

注：MVVM（model-view-viewmodel）指viewmodel自动接收view数据展示到model上

vue中的MVVM：
（1）把model上的数据绑定到view上
（2）界面上发生一些操作时，将数据回调至javascript对象

注意：开发中什么时候称之为方法，什么时候称之为函数？
在类中定义的通常称之为方法
（2）v-once：只渲染一次，不随着数据的改变而改变

（3）v-html：用于解析html元素

（4）v-text：用于展示文本，一般不用

（5）v-pre：原封不动地显示内容

（6）v-cloak：在vue解析之前，有一个属性v-cloak，解析之后删除

（7）v-bind：动态绑定属性，常用于绑定链接
语法糖写法为：(冒号就是简写)

<a v-bind:href=""></a>
<div :class={类1：true，类2：false}></div>
<div :style={fontSize：'50px'，类2：false}></div>

（8）v-if和v-else：确定内容是否显示（布尔值）

（9）v-show：决定内容是否显示（布尔值）

注：v-if和v-show的区别
v-if的条件为false时，它所指向的元素不会存在于DOM中
v-show的条件为false时，只是给指向元素加了个行内样式使其不显示，但是元素还存在DOM中

（10）取数组中的数据，用ul li
v-for=“item in movies”
其中movies为数组
注：v-for获取对象时，获取一个值为value，获取两个：值和属性，获取三个：值、属性和索引
使用v-for时建议加上key属性，用于高效更新虚拟DOM

（11）v-model：用于实现表单元素和数据的双向绑定
等同于：使用v-bind绑定一个value属性，v-on给当前元素绑定input事件

v-bind：value=“number1”
@input=“number1=$event.target.value”

注：v-model和radio同时使用时，需要用name属性对不同的按钮进行区分；和checkbox同时使用时，单选时绑定的为bool类型，多选时绑定的数据要为数组类型；和select同时使用时单选为字符串类型，多选要加上multiple为数组类型

修饰符：
1、lazy：表单失去焦点后再进行显示
2、number：使赋值为number类型
3、trim：去除空格

4 Vue的生命周期

（1）生命周期:vue实例从创建到销毁的过程

（2）Vue的生命周期分为8个阶段：创建前\后、加载前\后、更新前\后、销毁前\后

（3）第一次加载页面时触发：created、beforecreate、mounted、beforemount

（4）DOM渲染在mounted时完成

生命周期包含的函数:
（1）beforeCreate：此时data和methods中的数据还没有渲染完成

（2）created：此时data和methods中的数据初始化完成，可以调用

（3）beforeMount：模板已在内存中编译好，没在界面显示，变量未被替换

（3）与（4）之间：将内存编译好的模板替换到界面中

（4）mounted：在mounted中操作界面的DOM节点

当数据被修改时
（5）beforeupdate：data是新的，但是界面显示的还是旧的

（6）updated：页面与data保持一致

（7）beforedestory：实例中的data、methods等都处于不可用状态，但并没有销毁

（8）destoryed：销毁

6 响应式数组方法

（1）push：在数组后面添加内容
（2）pop：删除数组最后一个元素
（3）shift：删除数组第一个元素
（4）unshift：在数组最前面添加元素
（5）splice：删除元素\插入元素\替换元素
（6）sort：排序
（7）reverse：反转
（8）Vue.set(要修改的对象，索引值，修改后的值):
注：通过索引修改数组数值不是响应式的！！！

toFixed(n):保留n位小数

7 组件化

使用步骤：
（1）创建组件构造器
调用Vue.extend(对象)方法
传入对象包含属性：
1、template：模板

（2）注册组件
调用**Vue.component(‘组件的标签名’，组件构造器)**方法
（3）使用组件
再Vue实例范围内使用组件，即Vue挂载的元素下，即el属性包含的元素

全局/局部组件：组件在Vue实例内部注册为局部组件

7.1 父组件/子组件

在父组件中进行注册子组件，可以在父组件的模板中使用子组件

7.2 父子组件的通信

（1）通过props向子组件传递数据
使用V-bind绑定Props的属性
注：v-bind不支持驼峰定义，例如：cMovies，可以用c-movies处理

数据验证：
1、类型限制
Movie：String
2、提供一些默认值
Movie：{
type: String,
default:‘11111’,
required:true %必须传的值
}
类型是对象或数组时，默认值必须要为函数

（2）通过自定义事件向父组件发送消息
在子组件中使用$emit()向父组件发送事件
在父组件中使用v-on监听子组件事件

7.3 父子组件的访问方式

父组件访问子组件

（1）$children
会取出所有子组件，是一个组件数组
（2）$refs reference

<cpn ref="aaa"></cpn>
//父组件中
this.$refs.aaa

子组件访问父组件

（1）this.$parent

简写方式

Vue.component(‘cpn’,{
template:"<div></div>"
}）

模板抽离方式

（1）script标签
注：类型必须是text/x-template

 <script type="text/x-template" id="cpn">
    <div id="app">
      <h2></h2>
  </div>
 </script>
Vue.component(‘Cpn’,{
template:"#cpn"
}）

（2）template标签

 <template id="cpn">
    <div id="app">
      <h2></h2>
  </template>
 </script>
Vue.component(‘Cpn’,{
template:"#cpn"
}）

注：组件不能访问Vue实例中的data

组件的数据放在组件对象的data属性中，data属性必须是一个函数，返回一个对象。
原因：一函数返回值形式使每个组件实例可以独立维护一份返回对象的独立拷贝，而不是共享同一个对象的引用。

特别注意

默认事件绑定函数不带括号，默认传参为事件对象

自定义事件绑定函数不带括号为自定义事件的返回值

8 插槽：slot

组件的插槽是为了让封装的组件更具有扩展性，让使用者决定组件的内容展示什么

注：写在插槽上的样式无效，因为最后插槽会被替换掉，可以对插槽外部标签动态绑定属性

具名插槽：给插槽加上name属性

作用域插槽： 父组件替换插槽的标签，但是内容由子组件来提供

<div id="app">
    <cpn>
      <div slot-scope="slot">
        <ul v-for="item in slot">
          <li>{{item.join('*')}}</li>
        </ul>
      </div>
    </cpn>
  </div>
   <template id="cpn">
    <div>
      <slot :data="movies"></slot>
    </div>
  </template>

注：movies属性在子组件中定义

9 模块化

9.1 CommonJS

（1）导出
module.exports={}

（2）导入

var {flag，sum} = require（文件名）

9.2 ES6模块化

（1）导出：export
export default默认导出只能有一个

（2）导入：import
全部导出import * as _ from

10 WebPack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

url-loader修改文件名称:

name:'img/[name].[hash:8].[ext]'

同时存在el和template时，template会将el中内容替换

loader和plugin的区别

（1）load主要用于转化莫某些类型的模块，它是一个转换器

（2）plugin是插件，它是对webpack本身的扩展

添加版权的Plugin：BannerPlugin

HtmlWebpackPlugin插件：
（1）自动生成一个index.html文件
（2）将打包的js文件，自动通过script标签插入到body中

项目发布前需要对js等文件进行压缩处理：uglifyjs-webpack-plugin

配置文件分离

将webpack.config.js文件分为基础、开发、生产三个配置文件

合并配置文件：

const webpackMerge=require('webpack-merge')
const baseConfig=require('./base.config')
module.exports=webpackMerge.merge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true
  }
})

使用vue-cli就可以快速搭建vue开发环境和对应的webpack配置

Vue CLI2初始化项目

vue init webpack my-project

Vue CLI3初始化项目

vue creat my-project

runtime+compiler和runtime-only

1、runtime+compiler的渲染过程

template -> ast -> render -> vdom -> UI

从模板解析为抽象语法树，然后编译为render函数，将render函数翻译为虚拟DOM，然后将VDOM生成为真实DOM
2、runtime-only的渲染过程

render -> vdom -> UI

优点：代码量更少，性能更高

//cpn为组件
const cpn={
template:'<div>{{message}}</div>',
data(){
return {
message:'hello'
}
}
}
new Vue({
el:'#app',
components:{
cpn
},
render:function(creatElement){
return creatElement('h2',{class:'box',['Hell']})
return creatElement(cpn)
}})

注：.vue文件由vue-template-compiler解析了
即.vue文件中的template由vue-template-compiler解析成了render函数

Vue CLI 3

1、基于webpak4
2、设计原则为“0配置”
3、提供vue ui命令0
4、移除static文件夹，新增public文件夹