vue安装及常用属性

Posted huanghaobing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue安装及常用属性相关的知识,希望对你有一定的参考价值。

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属性值

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

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

  3. 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实例销毁后

 

以上是关于vue安装及常用属性的主要内容,如果未能解决你的问题,请参考以下文章

VS Code中小程序与Vue常用插件合集(前端合集)

Vue数据绑定原理及简单实现

Vue入门---安装及常用指令介绍

vue 路由对象(常用的)

python常用代码

vue-cli项目搭建及安装常规依赖