第一章:例说Vue.js
$ npm i vue-cli -g
首先,在组件脚本定义中使用data定义用于内部访问的数据模型:
export default { ... data () { return { title: "vue-todos" } } }
data可以是一个返回Object对象的函数,也可以是一个对象属性,也就是说,可以写成以下的方式:
export default { ... data : { title: "vue-todos" } }
在Vue实例内的其他地方可以直接用this引用data内定义的任何属性,比如this.title就是引用了data.title。
v-for:
循环对象(value,key,index) in user
v-on:
可以写事件名也可以写表达式
event:
不传入参数时,默认事件的第一个参数为事件对象
传入参数时,要获得事件对象需要传入$event
v-model修饰符:
1. lazy
输入框失去焦点或者按下回车时,v-model绑定的值才会发生变化,即在“change”时而非“input”时更新
2. number
自动将用户的输入值转为数值类型
。
3. trim
自动过滤用户输入的首尾空白字符
。
mouted 和 created的区别
- mouted是页面已经渲染完成
- created 是页面未渲染完成,但是vue实例 已经初始化完成
refs
$nextTick vue组件更新之后获取最新DOM
使用$nextTick
能立即拿到结果
样式绑定:
这里推荐一个简单的记忆方法来学习Vue的样式绑定,无论绑定的是样式类还是样式属性,:class和:style表达式内一定是一个JSON对象。凡是样式绑定必然是绑定到判断对象上的
● :class的JSON对象的值一定是布尔型的,true表示加上样式,false表示移除样式类。
● :style的JSON对象则像是一个样式配置项,key声明属性名,value则是样式属性的具体值。
<li v-for="(todo,index) in todos" v-bind:class="{'checked': todo.done}">
三元表达式方法: :class="{to.done?'checked':''}"
过滤器:
一个很出名的时间格式化专用的包——moment.js,先安装moment.js:
$ npm i moment -S import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn')
export default { // 省略... filters: { date(val) { return moment(val).calendar() } } }
最后在模板上应用这个过滤器:
<time>{ { todo.created | date }}</time>
在所有的过滤器中是没有this引用的,过滤器内的this是一个undefined的值,所以不要在过滤器内尝试引用组件实例内的变量或方法,否则会引发空值引用的异常。
第二章:工程化的Vue.js开发
咳咳
第三章:路由与页面间导航
安装
$ npm i vue-router -D
vue-router实例是一个Vue的插件,我们需要在Vue的全局引用中通过Vue.use() 将它接入到Vue实例中。在我们的工程中,main.js是程序入口文件,所有的全局性配置都会
在这个文件中进行。
打开main.js文件并加入以下的引用:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
Vue.js是没有页面这个概念的,Vue.js的容器就只有组件。但我们用vue-router配合组件又会重新形成各种的“页”,那么我们可以这样来约定和理解:
(1)页面是一个抽象的逻辑概念,用于划分功能场景。
(2)组件是页面在Vue的具体实现方式。
一定要谨记以上这两点,因为在后面的内容中还会围绕这个约定对我们的项目进行结构性的优化。
我们创建VueRouter实例时用了mode:history的参数,这个值的意思是使用history模式,这种模式充分利用了history.pushState API来完成URL跳转而无须重新加载页面。
如果不使用history模式,当访问home的时候地址就会变为:
http://localhost/#home
反之为:
http://localhost/home
这就是history模式与hash模