Vue基础笔记一
一、当我们通过script标签对引入Vue.js之后,我们会得到一个全局变量 Vue(直接挂在window身上)。
二、查看Vue源代码总结:
1.是通过匿名函数封装的,格式:( function ( arg1,arg2) {})( a,b );
2.好处:1. 安全性要高2. 自调用3. 解决了命令冲突。
3.源代码封装的大致原理:
(function ( global,factory) {
global.Yyb = factory
})( this, function ( options ) {
function Vue ( options ) {
this.name = options.name
this._init()
}
function _init () {
Vue.prototype.age = 18
Vue.prototype.id = 10
}
return Vue
})
4.前端模块化:
4.1 AMD
- 定义模块 define关键字
- 模块引入 require
4.2 CMD
- 定义模块 define关键字
- 模块引入 require
4.3 Common.js
- 导出 module.exports
- 引入require
5.Vue使用方式有两种
- script标签对引入
- npm安装
- 实现 - amd
三`
<body>
<!-- 为什么id叫做app, app是 application 的简写, application 应用 -->
<div id="app">
<!-- 这里面是vm的作用范围 -->
<!-- 数据展示 -->
<!-- 我们想要在html结构中书写js,那么就需要模板语法: vue提供了mustache ,双大括号语法 -->
<p> {{ this.$data.info }} </p>
<p> {{ this._data.info }} </p>
<p> {{ this.info }} </p>
<p> {{ info }} </p>
</div>
<div id="app1">
<!-- 这里是VM1的作用范围 -->
</div>
</body>
<script src= "../../lib/vue.js"></script>
<script>
// new Vue( options ) options 称之为配置, 配置的属性和方法 , 它是一个对象
var vm = new Vue({
el: '#app', //官方称呼: ‘挂载’ element简写,它的作用是选取一个已有的DOM作为Vue实例的作用范围
data: { //数据
/*
data选项中定义的数据相当于全局变量,在app模板中相当于全局变量,可以直接使用
*/
info: 'Hello Vue'
}
})
console.log( vm )
var vm1 = new Vue({
el: '#app1'
})
</script>
四、mustache语法
- 语法支持度:
- 研究它对js语法、数据类型的支持度
- 语法
- 流程控制
- 条件判断
- 循环
- 三目运算符
- 数据类型
- 经过输出我们发现数据类型可行
2. 写法
- 内容: 我们要加 {{}}
- 属性: 我们不加 {{}}
- 属性要想使用,我们必须依靠一个知识点: 指令
五、指令是啥?为什么要有指令这个概念?
帮助你理解:
2014年Vue1.0x问世,它借鉴了当前热火的angular的一个概念: 指令
指令是用来操作DOM的
指令其实就是封装的函数,这个函数绑定在元素身上, 那么久可以获取元素,然后就可以操作这个元素了
Vue也是MVC的衍生框架,所以你采用类似的方案
但是属性可以随意定义,但是我们希望我们添加的属性有vue标识,所以vue给它自定义的属性加了一个表示
这个标识就是 v-
六、指令
v-html: 非转义输出: 将xml类型数据解析
v-text 和 {{}} 结果是一样的,但是{{}} 有个短暂的{{}} 显示
项目; v-text 和 {{}},我们选择 {{}}
v-if的单路分支效果和 v-show 一样
面试: v-if vs v-show 有何区别呢?
v-if控制的元素的存在与否
v-show控制的事元素的display: none 属性
性能的差别:
当初始条件都为false时,v-show的初始渲染开销较高
当频繁切换时,v-if的切换开销较高
项目中:
频繁切换: v-show
切换不频繁; v-if
v-bind 单项数据绑定
- 作用: 将一个数据赋值给已有属性
v-model
- 作用: 实现双向数据绑定
- 作用范围: 表单元素,因为它默认绑定了 value
- 经验: 看到表单元素,直接上v-model