刚开始学习vue,看的梁灝编著的vue.js 实战,这是我看的基础篇的总结,方便以后自己查找
首先是视图模型变成了,mvvc,把原先的视图模型,view层变为viewModel层和view层主要的目的是:数据和视图元素分开
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>zhengwenneirong</p>
<div slot="footer">dibuixinxi</div>
</child-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('child-component',{
template:'\
<div class="container">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div> '
})
var app = new Vue({
el:'#app',
})
</script>
</body>
</html>
这个例子来源于书本,vue 首先建立vue实例, new Vue
el 用于指定一个页面中已存在的DOM元素来挂载Vue实例,
Vue 实例的data选项,可以声明应用内需要双向绑定的数据。
Vue的生命周期:
created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用
mounted el挂载到实例后调用,一般我们的第一个逻辑会在这里开始
beforeDestory 实例销毁前调用
{{}} 双大括号 是最基本的文本插值方法,它会自动的将我们双向绑定的数据显示出来
v-html 想输出的是html而不是将数据解释后的纯文本,可以使用这个指令。
v-pre 跳过这个元素和它的子元素的编译过程
vue 只支持单个表达式,不支持语句和控制流
{{data | formatData}} 过滤器(filter)
v-bind 的基本用途是动态更新HTML元素上的属性 class、style 语法糖是 :
v-on 绑定事件监听器 语法糖是 @
计算属性 computed 和 method 的区别在于是否依赖缓存,computed 只有当他所依赖的数据发生变化的时候,才会重新取值,但是method是只要被重新渲染,就会被执行。
条件渲染指令: v-if、v-else、v-else-if
v-if 和 v-show的区别,二者具有类似的功能。不够v-if 才是真正的条件渲染,若当表达式的初始值为false,则一开始元素、组件并不会渲染,只有当条件第一次变为真时,才开始编译。v-show 无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常变得场景,应为它开销比较大,v-show适用于频繁切换条件。
列表渲染指令:v-for =“book in books” 当需将一个数组遍历或枚举一个对象循环显示时
v-modle 用于表单元素上双向绑定数据
v-bind 绑定一个布尔类型的值,为真是选中,为否是不选,而 v-model 和value组合使用来实现互斥选择的结果。
Vue.components 组件(' ',{ })在组件中,data必须是函数。在组件中添加 template 就可以显示组件内容。
在组件中通过props 来声明需要从父级接收的数据,数据传递是单向的,从父级向子组件传输。
$emit 用于向上级派发事件
props 传递数据、event 触发事件、slot 内容分发 构成了Vue 组件的3个API来源,再复杂的组件也是由这三部分组成。