vue 基础
构造器 ：**new Vue() **
数据绑定 计算属性：
el ：，data：{}，watch:{} ,methods：{}, computed：{}
vue实例属性与方法：带有前缀 $，以便与data属性区分例如
$watch("a", function())
//观察vue实例里面的a变化后调用function(){},
//注意function(){}不能是箭头函数，因为箭头函数的this被绑定
vue生命周期
created mounted updated destoryed
vue 的this指向vue实例click
vue的模板语法
{{a}}
v-bind: =》用来响应式更新绑定属性
v-bind：href="" 缩写 ==> :href=""
v-bind:class:"{classA: tureOrFaule, classB: TureOrFaule}"
v-on: click ==> @click
v-on: $on(" ") 监听事件
v-on: $emit('' ") 触发事件
vue的过滤器？？？？
条件渲染 v-if/v-show
列表渲染 v-for
v-model 双向数据绑定
var app5 = new Vue({
// 绑定到 dom 通过id ，在vue里的“，”（逗号）el data
结束后要有逗号 最后一个不用写
el: '#app',
//数据要放在data里
data: {
//在html嵌入绑定数据message要用“{{...}}”表示
message: 'Hello Vue.js!'
},
//function要放在methods里
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
vue组件
Vue.component(tagName, options)
创建组件
语法糖
字符串模板
HTML 特性不区分大小写。当使用非字符串模版时，名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）:
使用v-model 来进行数据双向绑定？{{}}
v-bind
Vue 实例都会代理其data对象里所有的属性。
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的 data 属性区分
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})
vm.$watch('a', function (newVal, oldVal) {// 这个回调将在 vm.a 改变后调用})
v-bind
指令将该元素的href属性与表达式url的值绑定<a v-bind:href="url"></a>
v-on
它用于监听 DOM 事件<a v-on:click="doSomething">
注册组件
// 全局注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
date必须是函数(使用组件时)
使用$on(eventName)
监听事件
使用$emit(eventName)
触发事件
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// data 是一个函数，因此 Vue 不会警告，
// 但是我们为每一个组件返回了同一个对象引用
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
vue-router
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
如果使用模块化机制编程， 要调用 Vue.use(VueRouter)
// 0. 如果使用模块化机制编程， 要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
vuex
//install
npm install vuex
// loading vuex and use
import vuex from 'vuex'
import vue from 'vue'
vue.use(vuex)
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
注意组件名称 如何引用
网友评论