1.vue环境配置 首先在官网上下载node.js，然后安装cnpm。在保证上述环境没有问题的情况下，安装vue的脚手架 vue-cli，接下来创建项目 vue init webpack 项目名称（这个是完全版） vue init webpack-simple 项目名称 （这是简单版）。在创建完项目之后，要安装依赖 即cnpm install，之后重启项目并运行即cnpm run dev。vue项目开发主要是在app.vue 2vue基本使用语法 2.1数据绑定 {{}} 绑定表达式 表达式里面可以进行运算 2.2绑定属性 使用的指令是 v-bind 指令 方式：v-bind:title="变量" 也可以简写：:class="变量" 绑定变量的指令 v-text 绑定为元素的文本值 <!-- 绑定变量的指令 v-html 绑定元素的html内容 解析里面的标签 --> <!-- class类名称的动态绑定 v-bind --> <div :class="defaultstyle"></div> <!-- 绑定多个类名称 里面使用{}--> <div :class="{'add':true,'addcolor':isadd,'changecolor':!isadd}"></div> <!-- 直接绑定样式 --> <div :style="{'width':sw+'px','height':sh+'px','background-color':'red'}"></div> <!-- vue里面的数据双向原则 数据双向绑定指令 v-model="" 一般使用在表单元素上 --> 2.3 循环渲染数据 使用的v-for 指令 进行数据的循环渲染 数据渲染 <!-- 循环渲染数组类型的数据 v-for 指令循环那个元素给谁写 item 当前的遍历值 index 当前值的索引 :key 绑定唯一键 --> 2.4 <!-- MVC 三层结构 Model View Control控制器 vue 的设计模式是MVVM 模式 Model V view VM ViewModel
vue数据双向 vue 里面的数据双向原则 model 层数据发生变化 view 相应改变 view变化 model 变化
vue事件 绑定事件的指令 v-on:type="方法" 简写 @type="方法";
vue中ref获取dom元素节点 MVVM--
getDom() { //获取的时候 this.$refs.名称 //就可以拿到元素 let refs = this.$refs.refele; //返回的是原生js dom refs.innerHTML = "<b>获取dom</b>"; console.log(refs);
2.5<!-- 怎么处理事件的冒泡
下面的常规代码出现了事件冒泡行为
事件的修饰符 在事件之后写
@click.stop="" 这个是阻止事件冒泡 等于 event.stopPropagation()
@click.prevent="" 这个是阻止事件的默认行为 等于event.preventDefault()
@click.self=""; 点击自身的时候触发事件 e.target===e.currentTarget
@click.once=""; 让事件触发一次
@click.passive="" 事件永远不调用默认行为
@click.capture="" 事件的捕获
事件里面的e event 和之前的js 里面的事件参数是一致的
直接写的this 执行当前的组件 //console.log(this);
// 直接写的e 参数 里面currentTarget 没有值的
//在事件上传递参数 $event
console.log(element.currentTarget); //指向就是当前你点击的对象 就是绑定事件的对象
-->
// vue 里面如何使用jquery 代码
//安装jquery cnpm install jquery --save-dev 安装到 devDependencies
//安装 cnpm install jquery --save 安装到dependencies
//那个组件使用 给谁引用 import $ from 'jquery'
//引入完成之后 输出 $
