vue v-指令 事件 虚拟dom jquery的安装

1. 写项目前，可以设置代码的快捷方式，步骤如下：

1. 在管理中点击用户代码片段，搜索vue.json；
2. 在vue.json文件中设置代码的快捷方式。
   
3. 在webpack.config.js文件中配置路径的简写

resolve: {
          alias: {
                     'vue$': 'vue/dist/vue.esm.js',
                     '@':path.resolve('src')           // 配置src 路径的简写
                 },
         extensions: ['*', '.js', '.vue', '.json']
}

2. 常用的快捷键：
代码格式化：alt+shift+f
复制当前行：alt+shift+up / down
字体放大 / 缩小：ctrl+ +/-

一、v- 指令

1. v-text

设置标签文本值，内部还可以写表达式。

2. {{ }}

插值表达式{{ }}：设置标签的部分文本值

3. v-html

设置标签的html内容

4. v-show

设置元素的显示和隐藏，即样式 display

5. v-if

设置元素的显示和隐藏，实质是添加或删除元素

6. v-bind

1. 给元素设置动态属性，适用于所有属性，并且是单向的（在页面的直接操作不会改变变量）。
2. v-bind: 属性=属性值
   简写为 ：属性=属性值
3. 设置class属性：
   绑定一个类: v-bind:class=“类名”
   绑定多个类（常用的两种）：
   :class="[‘类名1’，‘类名2’]
   :class="{‘类名1’：true/false,‘类名2’：true/false}
4. 设置style：
   :style="{‘color’:activityColr,‘fontSize’:font}"。

7. v-model

给表单元素设置value值，且它是双向绑定的（在页面上的直接操作也会改变变量）。

MVVM相关知识：
MVVM： Model-View-ViewModel的简写，即模型-视图-视图模型，vue的设计模式是MVVM。
M： 是后端传递的数据层。
V： 是所看到的视图层。
VM： 是连接view和model的中间层。它有两个方向：一是当M层数据发生变化时，V层也发生变化，实现方式是：数据绑定。二是当V层发生变化时，M层数据也发生变化，实现方式是：DOM 事件监听。这就是数据的双向绑定。

8. v-for

v-for="(item,index) in arr" :key=“可唯一标识当前元素的变量”

二、事件

1. 添加事件

v-on:click=“事件函数”，可简写为@click=“事件函数”

2. 事件修饰符

@click.self=“事件函数”: 点击自身可以触发事件
@click.prevent=“事件函数”: 阻止事件的默认行为
@click.capture=“事件函数”: 相当于事件的捕获。
@click.once=“事件函数”: 一次性事件
@click.stop=“事件函数”: 阻止事件冒泡
@keyup.96=“方法”: 只有按下ascii码为96的键才会执行事件函数。
@keyup.enter=“方法”: 只有按下回车键才会执行事件函数。只有特定的按键才能使用名称，一般的键只能使用ascii码。

3. this

this: 指当前的组件

4. 事件参数

e.target=e.srcElement: 事件发生的目标元素
e.currentTarget：事件绑定的元素

三、虚拟dom元素

1. 创建虚拟元素原因：

虚拟元素不会修改一次就立即渲染页面，而是修改完毕后一次性渲染到页面上，可以提高浏览器的性能。

2. 获取虚拟dom元素的方法：

1. 给标签添加ref属性，并设置属性值为 refss（属性值任意取）
2. 通过this.$refs.refss来获取该元素

四、jquery的安装

vue 中要写jquery代码，就要安装jquery，步骤：
步骤1. 给项目安装jquery:

方式 1： cnpm install jquery --save-dev 将jquery安装在devDependencies中
特点： 该项目拷到其他地方时，在其他地方安装依赖时也会自动安装jquery。
方式 2： cnpm install jquery --save 将jquery安装在dependencies
特点： 该项目拷到其他地方时，在其他地方安装依赖时不会自动安装jquery，需要自己手动安装。

步骤2. 给组件引用jquery:

哪个组件要使用jquery，就在哪个组件的script标签里引入jquery：
import $ from "jquery"

步骤3. 运行项目

重新运行项目就可以使用了