一、vuj的简介

1、vue.js是一套构建界面的渐进式框架

2、关注图层，自底向上增量开发

二、安装

1、官网下载js

2、直接引用（最简单方便的使用）
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3、npm方法

用npm下载vue


npm install vue

（这个方法还不太会！！！）

4、命令行工具（太难了没看懂可以照着敲）


# 全局安装 vue-cli

$ cnpm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 这里需要进行一些配置，默认回车即可

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack

进入项目，安装并运行：


$ cd my-project

$ cnpm install

$ cnpm run dev

DONE  Compiled successfully in 4388ms> 

Listening at http://localhost:8080

之后可以输入http://localhost:8080进入主界面（还没试过所以没有图）

三、vuj基础

1、语法格式：


var vm = new Vue({

…………

})

2、vue对象里面有的东西：

（1）el：表明是对某区域改动

如：








    

    Vue 测试实例 - 菜鸟教程(runoob.com)

表明是对id为“app”的div块做变动

（2）data：定义属性

（3）methods：定义方法

（4）computed：计算属性：处理复杂逻辑

（5）watch：创建监听

（6）。。。还没学到后续补充

3、vue实例还提供实例方法，有前缀$

四、模板语法

1、插值

（1）文本：
在html中用{{ }}来显示属性值，vue属性值改变也会使html视图发生相应的改变
（2）、Html
使用v-html指令输出html代码块

此时输出的是：

image.png

（3）属性
v-bind指令：


  修改颜色

表示如果use的值为true则将div的class绑定为class1
（4）表达式


    {{5+5}}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}
    xxxx

2、指令

（1）参数
①v-bind绑定参数：

xxxx

这里的href是参数，v-bind将href和url的值绑定在一起
可以进行对v-bind的缩写

xxxx

②v-on

v-on绑定监听，表示点击之后该做点什么
可以对代码进行缩写：

（2）修饰符

表示提交调用event.preventDefault()

event.preventDefault() 方法阻止元素发生默认的行为。
例如：

当点击提交按钮时阻止对表单的提交
阻止以下 URL 的链接

3、用户输入

（1）用v-model进行双向绑定：


    {{ message }}

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

（2）按钮用v-on来绑定事件


    {{ message }}

[注]除methods外还可以使用computed来实现翻转字符串


    原字符串{{message}}
    反转后的字符串（computed）:{{reversedString}}
    反转后的字符串（method）:{{mReverseString()}}

计算属性computed基于依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods，在重新渲染的时候，函数总会重新调用执行。（这里不太懂）使用 computed 性能会更好，但是如果不希望缓存就可以使用 methods 属性。

4、过滤器

格式如下：


{{ message | capitalize }}

在{{ message | capitalize }}中前一个为参数，后一个为过滤的方法
如实例将首字母大写：


  {{ message | capitalize }}

过滤器可以串联（可有多个过滤器同时发挥作用）{{ message | filterA | filterB }}
也可以带参数{{ message | filterA('arg1', arg2) }}

五、条件和循环

1、条件

使用v-if实现条件判断，这个比较简单，一个例子即可解释：

也可以使用v-show来判断是否现实：

`Hello!`

2、循环

循环使用v-for指令：




    
    
    



    
        {{site.name}}

也可以运用在

学vue.js笔记