文章目录

• 1、概述
• 2. idea 安装 Vue 插件
• • idea 安装 Vue 插件没有Vue component选项
• 3. 下载地址
• 4. vue入门 -- hello,vue!
• 5. Vue常用7个属性
• 6. Vue - 指令
• • 6.1 v-bind -- 绑定元素特性
  • 6.2 v-if,v-else
  • • if -- else
    • if -- else if -- else
  • 6.3 v-for
  • 6.4 v-on 指令 -- 监听事件
  • • 事件处理方法

1、概述

• Vue (读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。
• 与其它大型框架不同的是, Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易上手,还便于与第三方库(如: vue-router:跳转, vue-resource:通信, vuex:管理)或既有项目整合。
• 官网: https://cn.vuejs.org/v2/guide/

2. idea 安装 Vue 插件

1. 点击 file 打开设置 settings
2. 选择Plugins,搜索vue.js安装

idea 安装 Vue 插件没有Vue component选项

1. 点击 file 打开设置 settings，展开 Editor 找到 file and code templates
2. 找到 Vue single file component 并选中它，然后点击copy
3. 复制后底部出现了一个新的文件
4. 把 Name 改成 Vue Component，然后把代码里的 “COMPONENT_ ”删掉，最后点 ok 就完事了

3. 下载地址

• 开发版本
  • 包含完整的警告和调试模式: https://vuejs.org/js/vue.js
  • 删除了警告，30.96KB min + gzip: https://vuejs.org/js/vue.min.js
• CDN

4. vue入门 – hello,vue!

1、 在html中通过cdn导入vue

2、绑定标签，传输数据，标签用{}接收数据

    {{message}}

5. Vue常用7个属性

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

6. Vue - 指令

你看到的v-bind等被称为指令。指令带有前缀ⅴ-,以表示它们是νue提倛的特殊特性。可能你已经猜到了,它们会在渲染的DOM上应用特殊的响应式行为。

6.1 v-bind – 绑定元素特性

可以使用bind指令来绑定元素特性!
指令的意思是:“将这个元素节点的tite特性和vue实例的 message属性保持一致”。

你再次打开浏览器的 Javascript控制台,输入 app. message=‘新消息’,就会再一次看到这个绑定了tite特性的HTML已经进行了更新

        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    

6.2 v-if,v-else

条件判断语句

• v-if
• v-else

if – else

    
yes
    
no

if – else if – else

    
A
    
B
    
C

6.3 v-for

循环语句
v-for=“item in items” 类似于 for(Object item : items)

    

        {{item.message}}
    

items数组自动包含index序号

    

        {{item.message}}--{{index}}
    

6.4 v-on 指令 – 监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 Javascript 代码。

示例：

  Add 1
  
The button above has been clicked {{ counter }} times.

事件处理方法

在 methods 对象中定义方法
示例：

    
    Greet