初识Vue
前端的框架与库的区别
-
总的来说,框架就是提供了前段项目的整体解决方案;库就是自己组合来实现项目。
-
打比方来说,前端的库就像是我们平时家里用的工具箱,里面有起子、锤子等各种工具。我们可以通过这个工具箱来制造东西,甚至我们可以用工具箱自己制造一下工具,方便以后我们制造东西;而框架,就更像是我们在淘宝上买好的的玩具车的框架,回来后拼装完成,然后可以根据自己的需要,贴上不同的贴纸,喷上不同的颜色,但是和其他使用框架的人一样,我们拿到手上的玩具骨架是一样的,我们很难去改变玩具车的骨架。
-
框架与库之间的最本质的区别在于控制权:you call libs,frameworks call you(你控制库,框架控制你,控制反转)
-
前端的库与框架的定义:
-
库(jQuery、 art-template):库更多是一个封装好的一个集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中查询需要的功能在自己的应用中使用,我们可以从封装的角度理解库;
art-template : 用于前端开发时一个绑数据的模板,这款模板引擎的最主要特点是轻量级、代码简洁、好用,一个template.js大概才几kb左右。art-template支持标准语法和原始语法,标准语法允许模板更易于读写,而原始语法具有强大的逻辑处理能力。
React和react-router, react-redux结合起来才叫框架,本身只是充当一个前端渲染的库而已,React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些
-
框架(thinkPHP):框架顾名思义就是一套架构,会基于自身的特点向用户提供一套较为完整的解决方案,而且控制权在框架本身,使用者要找框架所规定的某种规范进行开机发。
-
-
现如今,客户要求越来越定制化,所以应当将框架与库结合运用,让他们以聚合的形式在我们所要开发的应用中使用:
前端开发可以直接使用较为完整的框架(简易的DOM操作 + 发请求 + 模板引擎 + 路由功能),也可以使用多个库来开发(比如jQuery和art-template相结合),也可以在框架灵活应用库。
Vue的文件介绍
- npm下载的vue目录中,dist存放js文件:
- vue.common.js CommonJS 模块化代码
- vue.esm.brower.js
- vue.esm.js ES6 模块化代码
- vue.js 正常的代码(支持amd/commonJS/es6/umd)umd是前三个全部兼容
- vue.min.js 压缩后的代码
- vue.runtime.common.js
- vue.runtime.esm.js
- vue.runtime.js
- vue.runtime.min.js 运行时的代码,比vue.js要小30%
JS中的模块规范(CommonJS,AMD,CMD),点击这个链接可以彻底弄懂CommonJS和AMD/CMD;
**CommonJS: **一开始大家都认为JS是辣鸡,没什么用,官方定义的API只能构建基于浏览器的应用程序,CommonJS就按耐不住了,CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。它的终极目标是提供一个类似Python,Ruby和Java标准库。这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
**AMD: **CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
**CMD: **大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc
Vue起步
-
引包,让其具备Vue对象;
-
通过new Vue(options) 来启动Vue;
-
配置options选择对象:
{
el : ‘目的地’,
template : ‘模板’,
data : {键 : 值},
methods : {方法名: function() {代码行}}
}
;(1.在template里面加入要多行的写入需要使用ES6的模板字符串符号 ‘`’ 将多行的字符串圈起来,而且写入的模板必须只有一个根节点;2.data里面也可以不用直接使用对象,而是通过函数的return返回数据对象); 3.可以通过以下方法来创建对象的方法
methodName : function() { code lines }
-
页面中要存在改目的地,目的地的字符串与jQuery一样;(在vue内部运行机制中,需要根据你传递的字符串进行判断,比如是#xxx、.xxx还是元素标签查找,所以写入document.getElementById(‘xxx’)更为优化,可以避免vue来进行判断)
<div id = 'app'></div>
<script src = 'vue.js'></script>
<script>
new Vue({
el : '#app',
template : '<div><h1>hello world {{text}}</h1></div>'
data : function(){
return {
text: '卢严砖'
}
}
})
</script>
插值表达式
- {{表达式}}
- 对象(不可以连续三个大括号,要在第二个后面空一个空格,如:{{ {key : value} }});
- 字符串 {{‘xxx’}};
- 判断后的布尔值 {{ture}};
- 三元表达式{{ture ? ‘正确’ : ‘错误’}}
- 插值表达式可用于页面中简单粗暴的调试
- 注意:插值表达式的表达式必须在data中申明过
Vue中常用的v-指令演示
- v-text 只能在双标签中;其实就是给元素的innerText属性赋值
- v-html 其实就是给元素的innerHTML属性赋值
- v-if 判断是否插入这个元素;如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素,如果有if和else就不需要单独留坑了
- v-else-if 与v-if和v-else一起用
- v-else 与v-if连用
- v-show 判断是否隐藏元素,如果确定要隐藏,会给元素的style加上display : none
<div id = 'app'></div>
<script src = 'js/vue.min.js'></script>
<script>
new Vue({
el : '#app',
template : `<div>
<span v-text = 'myText'></span>
<hr />
<span v-html = 'myHtml'></span>
<hr />
<button v-if = 'isExit'>v-if alone</button>
<hr />
<button v-if = 'num == 1'>v-if</button>
<button v-else-if = 'num == 2'>v-else-if</button>
<button v-else >v-else</button>
<hr />
<button v-show = 'isShow'>v-show</button>
</div>`,
data : {
myText : '<h1>我是v-text的内容</h1>',
myHtml : '<h1>我是v-html的内容</h1>',
isExit : true,
num : 1,
isShow : false,
}
})
</script>
v-bind的使用
-
用来给元素的属性赋值:
- 可以给已经存在的属性赋值
- 也可以给自定义的属性赋值
-
语法在元素上为:
v-bind:属性名 = "常量||变量名"
-
简写形式
:属性名 = "变量||常量名"
<div v-bind:属性名 = "变量"></div> <div :属性名 = "变量"></div>
v-on的使用
- 用途:用于处理自定义原生事件,列入给按钮添加click事件
- 语法在元素上为:
v-on:原生事件名 = "给变量进行的操作||函数名"
- 简写形式:
@原生事件名 = "给变量进行的操作||函数名"
<div v-on:原生事件名 = "给变量进行的操作"></div>
<div @原生事件名 = "给变量进行的操作"></div>
<div id = 'app'></div>
<script src = 'js/vue.min.js'></script>
<script>
new Vue({
el : '#app',
template : `<div>
<input type = 'text' v-bind:value = "myValue" :file = " '这是file属性的值' " />
<hr />
<button v-on:dblclick = "doubleClick('这是双击后提示框弹出的值')" @click = " myValue = '这是单击修改后的value属性的值' ">通过v-on绑定单击和双击事件</button>
</div>`,
data : {
myValue : '这是value属性的值',
},
methods: {
doubleClick : function (message) {
alert(message)
}
},
})
</script>
在JS中双击的原生事件是dblclick();
该实例的v-on的原理是,单击了按钮后改变了vue内部的变量,然后vue会实时监控察觉到页面中使用的变量更改了,所以重新渲染了视图更改了部分。
v-model的使用
- 用途:双向数据流的绑定
- 页面改变影响内存(js)
- 内存(js)改变影响页面
- 语法在元素上为:
v-model = "name"
<div id = 'app'></div>
<script src = 'js/vue.min.js'></script>
<script>
new Vue({
el : '#app',
template : `<div>
<input type = 'text' v-model = "myValue" />输入xxxx
<hr />
<button v-if = " myValue == 'xxxx' ">当输入xxxx时,才会显示该按钮</button>
</div>`,
data : {
myValue : '这是value属性的值',
},
methods: {
},
})
</script>
v-bind和v-model的区别
- v-bind可以给任何属性赋值,v-model只能给具备value属性的元素的value属性赋值;
- v-bind是从vue到页面的单向数据流,而v-model是页面到vue,vue到页面的双向数据绑定。
v-for的使用
- 基本语法
- 数组的操作:
v-for = "item in arr"
- 对象的操作:
v-for = "item in obj"
item的值是对象中value对应的值
- 数组的操作:
- 如果是没有id
- 数组操作为
v-for = "(item, index) in arr" :class = "index"
- 对象操作为
v-for = "(value, key, index) in obj"
- 数组操作为
- 数组和对象中v-for的属性顺序 (index属性可以用来设置奇偶行不同的样式,例如:class = " index%2==0?‘red’:‘green’ ")
- 数组 item, index
- 对象 value, key, index
<div id = "app"></div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el : "#app",
template : `
<div>
<ul>
<li v-for = "item in arr" :class = "item.myClass">
{{item.name}}
</li>
</ul>
<hr />
<ul>
<li v-for = "(item, index) in arr">
{{index}}
</li>
</ul>
<hr />
<ul>
<li v-for = "item in obj">
{{item}}
</li>
</ul>
<hr />
<ul>
<li v-for = "(value, key, index) in obj">
value : {{value}}
key : {{key}}
index : {{index}}
</li>
</ul>
</div>
`,
data : {
arr : [{name : "张三", myClass : "张三"}, {name : "李四", myClass : "李四"}, {name : "王麻子", myClass : "王麻子"}],
obj : {'A' : '张三', 'B' : '李四', 'C' : '王麻子'}
}
})
</script>
关于对象内的this
- vue已经把以前this是window或者对象事件的问题搞定了
- methods和data本身是在一个对象里的,所以在该对象中可以通过this随意的取
- 方法:
- 取data中的值 :this.xxx
- 调用methods中的函数 :this.xxxMethod
<div id = "app"></div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el : "#app",
template : `
<div>
<h1 v-show = 'isShow'>这是通过v-show指令显示的内容</h1>
<hr />
<button @click = 'changeIsShow'>点击按钮改变以上内容是否显示</button>
</div>
`,
data : {
isShow : true,
} ,
methods: {
changeIsShow : function(){
this.isShow = !this.isShow;
}
},
})
</script>
渲染组件-父组件使用子组件
-
创建子组件(对象):
var Son = {template : '模板', data : '数据', methods : '功能', components : '子组件们'} 或者是 var Son = Vue.extend({template : '模板', data : '数据', methods : '功能', components : '子组件们'})
-
在父组件中声明,根属性
components : {'组件名' : '组件对象'}
-
在父组件中要用的地方使用
<组件名></组件名>
或者<组件名 />
- 在不同的框架中,有的不支持大写字母,所以使用时候组件名下划线命名法my_header
-
总结:
存在子,声明子,使用子
<div id = 'app'></div>
<script src="js/vue.min.js"></script>
<script>
var Son = {
template : `
<div>
<h1>我是子组件</h1>
</div>
`
}
new Vue({
el : '#app',
template : `
<div>
<son></son>
</div>
`,
data:{},
components : {
son : Son,
}
});
</script>
父子组件传值(父传子)
- 父组件向子组件传值是在父组件用子组件的时候通过属性传递
- 子组件还要声明
props : ['属性名']
,来接收父组件传来的值 - 声明以后,就是子组件自己的值了,可以随便使用
- 在template中,直接使用属性名代表变量
- 在js中通过‘this.属性名’使用
-
总结
父传子(属性),子声明(收),子直接用(就是自己的一样)
父子组件传值(子传父)
1.子组件向父组件传值直接使用子组件(对象)的data属性的里面的值就可以
Son.data.sonData
<div id = 'app'></div>
<script src="js/vue.min.js"></script>
<script>
var Son = {
template : `
<div>
<h1>{{title}}</h1>
</div>
`,
props : ['title'],
data : {
sonData : '我是子组件向父组件传的值',
}
}
new Vue({
el : '#app',
template : `
<div>
<son :title = "xxx"></son>
<hr />
{{sond}}
</div>
`,
data : {
xxx : '我是父组件向子组件传的值',
sond : Son.data.sonData,
},
components : {
son : Son,
},
})
</script>