Vue配置及语法

文件类型：

• node_modules 项目的依赖包文件
• src 开发文件 开发在src文件里面操作
• index.html 是整个项目的首页
• package.json 配置文件
• README.md 命令文件
• static 静态资源目录文件，放置静态的css或者图片
• config 项目的配置文件
• main.js 项目的启动文件——new Vue：实例化Vue对象
  

命令：

npm install 依赖命令——安装node_modules 依赖包
npm run dev 启动项目命令
localhost：8080 默认项目端口
npm run build 项目完成之后发布的命令，会出现一个文件夹dist ,只把 dist 文件上传服务器测试

修改默认端口：

在webpack.config.js里的devServer中修改：
例如：port：8000

修改host：

App.vue

Vue项目中 数据绑定 绑定属性 循环渲染数据 数据渲染

数据绑定：{{}} 绑定表达式 绑定变量
绑定属性： v-bind指令 方式：v-bind:属性名称=“变量” 简写方式：属性名称=“变量” v-bind是 单向绑定

绑定元素文本值：v-text 指令
绑定元素html内容：v-html指令 解析元素里面的标签
循环数据的渲染：v-for指令
class类名称的动态绑定：v-bind
绑定多个类名称：v-bind={}

Vue数据双向 Vue事件 Vue中ref获取dom元素节点（虚拟dom） MVVM

Vue数据双向：model 层数据发生变化 view变化 view变化 model变化
Vue的设计模式是MVVM模式 Model View（视图层） ViewModel
Vue绑定事件：v-on指令 v-on:type=“方法” 简写：@type=“方法”;

<button v-on:click="clickbtn">按钮</button>
<button @click="clickbtn2">按钮2</button>

处理事件冒泡：
在事件之后：@click.stop=" "
阻止事件默认行为：@click.prevent=" "

vue事件修饰符：

修饰符	作用
.stop	阻止事件向上冒泡 等价于event.stopPropagation()
.prevent	阻止元素的默认行为 等价于event.preventDefault()
.capture	再捕获阶段触发监听函数
.self	只当event.target===event.currentTarget时触发处理函数
.once	事件将只会触发一次
.passive	表示listener永远不会调用preventDefault()

事件里面的this指针问题： 指向Vue component组件
element.currentTarget 指向绑定事件的对象

事件的执行参数 event： 事件里面的 e（event）同 js 里面的 e（event）

e.target 和 e.srcElement指当前点击的目标元素

数据双向绑定指令：v-model 一般使用在表单元素上

获取虚拟dom：this.$refs.名称（获得原生js dom对象）

Vue里面安装jquery：
cnpm install jquery --save-dev 安装到devDependencies
cnpm install jquery --save 安装到dependencies