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项
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！