Vue.js2入门

Vue.js特点：

2016.10发布2.0
数据驱动
- 模板渲染 / 数据同步
- 模块化 / 组件化
- 扩展功能
- 路由
- Ajax
- 数据流

学习资料：

• https://cn.vuejs.org/ 中文官网
• https://github.com/vue.js 源码
• https://github.com/vue.js/vue 官方工具
• https://forum.vuejs.org/ 论坛

Vue实例对象

ESlint验证相关报错

ESlint中默认没有alert、使用 “===” 作为比较、不使用双引号等。
但是可以在.eslintrc.js 文件中配置验证规则，配置符合自己团队需求的验证规范。
比如：
允许tab和space混用：<’rules’: { “no-mixed-spaces-and-tabs”: [0, “smart-tabs”] }>
更多：http://eslint.cn/

在js里面，new 一个对象，需要赋值给某个值（变量），用Vue实例化的时候，不需要赋值给值（变量），所以要单独给配一条规则，给new Vue这行代码上面加这个注释，把这行代码规则的校验跳过，通过eslint-disable。

实例

new Vue({  el: '#app',  template: '<p>hello {{ word }}</p>',  data: {word: 'world'}    // components: { App }  子组件（组件树）})

组件

（文件分隔比较清晰）

import Vue from 'vue'// 全局注册Vue.component('my-header', { template: '<p>header dddddd</p>'})/* eslint-disable no-new */new Vue({  el: '#app'})

import Vue from 'vue'// 局部注册var myHeaderChild = { template: '<p>headerChild</p>'}var myHeader = { template: '<p><my-header-child></my-header-child> this is my header</p>', components: {'my-header-child': myHeaderChild}}/* eslint-disable no-new */new Vue({  el: '#app',  data: {word: 'hello world'},  components: { 'my-header': myHeader }})

<div id="app">    {{ word }}        <my-header></my-header>        <my-header-child></my-header-child>    </div>

防止多个相同组件中，一个组件修改变量而影响到其他组件，data使用这种写法

data () { return {word: 'hello world'} }

全局API

https://cn.vuejs.org/v2/api/

2.0 变量不能插入到属性中，只能使用v-bind
vbind:title=”hello” 或者 :title=”hello”
{{}} 也可以在标签中 v-html=”hello”
v-text不会转义标签
列表渲染 v-for
模板：导入，注册，引用

v-model:主要是在表单里面使用。比如文本框、下拉框、单选、复选、textarea。v-model是一个双向的功能。文本框输入以后，模型也会发生改变。反之模型改变了文本框也会改变。
v-text：主要用于文本的渲染。和{{}}功能一样。但是{{}}在第一次页面Vue木有初始化完成会显示{{}}字符。故文本渲染多用v-text。
v-show：控制显示隐藏。dom是存在的。仅仅加display block： display none。
v-if：kong’z控制显示隐藏。如果dom不显示，整个dom没有不存在。
v-bind：绑定属性。给一个dom元素添加属性。【比如：在做图片的渲染过程中，如果图片的src地址是动态的，那么就需要v-bind去绑定src属性，去给这个src赋值。】。凡是样式变化的可能用v-bind动态去操作class 【不要在原生的class里面去使用{{}}改变class】
v-for：循环。主要用于表格，

标签 去循环一个数组。【凡是看到列表就要v-for】
v-on：事件绑定。【v-on：同等于@】，用于需要人机操作交互的地方
filter : 过滤器。格式化数据。如后台返回金额19数字。页面显示：￥19.00元。
component ：组件。在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。