vue安装及常用属性

Posted 2020-12-02 huanghaobing

vue的安装

1. 安装node.js

2. 安装npm:npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 使用cnpm安装vue:cnpm install vue -g

4. 安装vue命令行工具：cnpm install vue-cli -g

5. 安装vue-devtools调试工具：

6. 创建vue脚手架:vue init webpack myproject

   1. vue init webpack myproject

   2. cd myproject // 进入目录

   3. cnpm install // 安装依赖

   4. cnpm run dev // 开启服务

   
   - src 主开发目录，所有的单文件组件都会放在这个目录下
   - static 项目静态目录，所有的css、js都会放在这个文件夹下
   - dist 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中 - node_modules node的包目录
   - config 配置目录
   - build 项目打包时依赖的目录

7. 常用命令

   1. v-html:将内容按照html格式进行插入

   2. v-text:将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题

   3. v-cloak:解决加载时的闪烁问题

8. 绑定属性:v-bind 或者 直接写 冒号 如果我们需要设置的模板变量是一个属性，比如a标签的href属性

9. 绑定事件：v-on 或者 @ 符号:给元素绑定对应事件。

10. 表单绑定 v-model：

11. 动态绑定

当某些情况下，无法确定表单中所代表的属性值，可以使用v-bind进行动态绑定，v-> model获取到的表单输入 此时则是我们定义的v-bind属性值

12. v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候渲染

13. 与v-if不同的是: v-show 的元素始终会被渲染并保留在 DOM 中 v-show 只是简单地切换元素的 CSS 属性 display

14. Vue实例生命周期

　　　　　　

- beforeCreate 数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
- created 数据已经绑定到了对象实例，但是还没有挂载对象
- beforeMount 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性
---------------------------------------------------------------------
$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段， 准备注入到我们vue实例指明的el属性所对应的挂载点 --------------------------------------------------------------------------
- mounted 将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el),生成页面上真正的dom
-------------------------------------------------------

上面我们就会发现页面的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作 ----------------------------------------------------------------------------

- beforeUpdate 数据发生变化时调用
- updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
- beforeDestroy Vue实例销毁前 - destroyed Vue实例销毁后