Vue笔记

Vue快速入门笔记

七大属性

学习vue我们必须之到它的7个属性，8个 方法，以及7个指令。787原则。

• el属性
  • 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
• data属性
  • 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
• template属性
  • 用来设置模板，会替换页面元素，包括占位符。
• methods属性
  • 放置页面中的业务逻辑，js方法一般都放置在methods中
• render属性
  • 创建真正的Virtual Dom
• computed属性
  • 用来计算
• watch属性
  • watch:function(new,old){}
  • 监听data中数据的变化
  • 两个参数，一个返回新值，一个返回旧值，

生命周期的八个钩子函数，可以在vue的各个阶段添加代码。

• beforeCreate() 创建实例
• created() 创建完成
• beforeMount() 创建模板
• mounted() 创建完成
• beforeUpdate() 更新状态
• updated() 更新完成
• beforeDestory() 销毁 vue 实例
• destoryed() 销毁完成

Vue的7种指令

• v-text 在元素中插入值

• v-html 在元素中插入html标签和文本

• v-if 根据表达式的真假值来动态插入和移除元素

• v-show 根据表达式的真假值通过控制css的display来隐藏和显示元素

• v-for 根据变量的值来循环渲染元素

• v-on 监听元素事件，执行相应操作

• v-bind 绑定元素属性，执行相应操作

    直接使用指令v-bind
    使用简化指令:
    绑定数据和元素属性  例如 title url 等  还有对象 如`class` `style` 等
  

• v-model 绑定input值和变量，实现数据视图的双向绑定

组件

消息传递

父子关系 传递 props

1. 父传子：父组件引用子组件标签，绑定值 子组件使用props接收父组件传来的数据 只读不修改 浅检查（不会去看对象里面的某一个 只要大部分相同即可）
2. 子传父 ：1. 父组件个子组件一个函数，子组件调用函数传值(参数)过去
   2.this.$emit('自定义事件'，参数)
   

消息传递高级工具

路由

创建Vue 工程项目

1. 创建项目

  vue init webpack [项目名字]
  cd [项目名字] 

2. 安装依赖 vue-router、element-ui、npm install、sass-loade(--save-dev)、node-sass(--save-dev);

element-ui 安装方法见官网 npm i element-ui -S

(组件 | Element)

npm install 第一次可能很慢

npm install

‘安装 SASS j加载器

npm install sass-loader node-sass --save-dev  # 报错 换
cnpm install sass-loader node-sass --save-dev

npm 命令

npm install moduleName : 安装模块到项目下

npm install -g moduleName : -g 安装模块到全局 看 npm install profix 的位置

npm install -save modulename： --save 的意思是将模块安装到项目目录下 并且在package文件的depenencies 节点下写入依赖 -S 是缩写
npm install -save-dev moduleName :--save-dev 的意思是将模块安装到项目目录下 并且在package文件的devDepenencies 节点下写入依赖