me)不支持html,属于me的vue练习（参考菜鸟教程）.html

属于me的vue学习

{{msg}} 我被覆盖了

我会被覆盖

v-bind给我添加了类 {'box1':box1,'box2':id}通过这种方式添加多个类

{{5+5}}//5+5=10

{{ ok ? 'YES' : 'NO' }} //ok是否为真

{{ msg.split('').reverse().join('') }}//msg倒序显示

指令里面可以写js代码

{{ ok ? 'ok存在可以看到' : 'ok不存在所以你看不到' }}

点击访问我

点我

{{ msg |capitalize |omit(3,'!!!')}}//使用过滤器将小写变为大写，超出3个字符后用！！！替换

v-bind:class的缩写形式为:class

v-on:click的缩写是@click

A

B

C

Not A/B/C

Hello!

{{ site.name }}

-----------------------

{{ value }}

{{ key }} : {{ value }}

{{ index }}. {{ key }} : {{ value }}

原始字符串: {{ msg }}

计算后反转字符串: {{ reversedMessage }}

我是测试的css样式,当ok为true的时候给我添加上active类

我是测试的css样式绑定对象

我的类名是通过计算得来的

我是数组添加类的

errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：

我是内联样式

增加 1

这个按钮被点击了 {{ counter }} 次。

Greet

点击

阻止单击事件冒泡

提交事件不再重载页面

修饰符可以串联

只有修饰符

添加事件侦听器时使用事件捕获模式

只当事件在该元素本身(而不是子元素)触发时触发回调

click 事件至少触发一次，2.1.4版本新增

按下 Alt + C 触发事件

input 元素：

消息是: {{ msg }}

单个复选框：

{{ checked }}

多个复选框：

h

j

m

选择的值为: {{ checkedNames }}

中国

世界

选中值为: {{ picked }}

选择一个网站 鸿基梦 张梦杰

选择的网站是: {{selected}}

全选：

{{checkeds}}

多个复选框：

a

b

c

选择的值为:{{checkedsNames}}

script

style

vue项目架构

vue项目架构(脚本架)：

build 打包工具(保存一些webpack的初始化配置)。

dist 最终代码存放地点

config 配置目录，包括端口号等。我们初学可以使用默认的。

node_modules npm 加载的项目依赖模块

src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

page 用来放置我们写的vue页面文件

assets: 放置一些图片，如logo等。

components: 目录里面放了一个组件文件，可以不用。

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js: 项目的核心文件。

static 静态资源目录，如图片、字体等。

test 初始测试目录，可删除

.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。

index.html 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。

package.json 项目配置文件。

README.md 项目的说明文档，markdown 格式

附加文件夹：

screenshots 项目参考画面以及截图存放。

images src下面的共用img文件

scripts src下面的共用js文件 base.js(基础js方法)

styles src下面的共用css文件 reset.css(初始化样式)

vue中的路由问题

整理：路由之间共享数据

在页面A传递数据

this.$router.push({

name: "backe",

params: { //常用安全

data: data

}

/*query: { //这种传参相当于 hjm100.cn?name=name&url=hjm100.cn

name: 'name',

dataObj: this.msg

}*/

});

在路由中给页面B添加name属性与数据中的name相互对应

{

path: '/backpackexchange',

name: 'backe',

component: BackpackExchange

}

在页面B获取数据：

let params = this.$route.params.data;

vue兼容问题

作者保证了4.2+

但是我看了下2016年2月的andoird版本统计

4.0 - 4.1的还有8%左右的份额

用虚拟机在4.1.1/4.0.3/4.0用系统浏览器跑了官方单元测试

4.1.1/4.0.3全绿

就4.0上有4个用例没过

v-for with transition

v-for staggering transitions reorder while staggered

v-model support debounce

Util - Language Enhancement debounce

4.0占%2左右

如果一定要支持

使用的时候注意避开这4项