day66 vue
前端框架;angular、react、vue
vue继承前两大框架的优点,摒弃了缺点
缺点;没有前两大框架健全
ECMAScript js ts比js强大
优点;中文API(使用说明书),单页面应用,基于组件化开发,数据双向绑定,虚拟DOM,数据驱动思想(相比DOM驱动)
vue实例
<script src="js/vue.js"></script> 需要导入静态文件 <script> 挂载点,通常都使用id选择器,唯一性 html和body标签不能作为挂载点使用 挂载点内的标签可以使用改vue new Vue({ el:'#id', 挂在点 data:{ // 用来存放属性变量 msg:'文本信息' }, methods:{ // 用来存放方法变量 f1:function(){ console.log(this.msg) }, f2(){ console.log(this.msg) // 在内部使用this就代表vue实例本身 } } }) 需要在实例外部调用时,需要用一个变量来接收 let app = new Vue({})
插值表达式
{{ 内部最少要有一个空格 }} 只能用在挂载点标签的内部 {{ a + b }} 可以进行简单的逻辑处理 {{ a * 10 }} {{ msg[1] }} {{ msg.split('') }}
文本指令
1.{{ }} 2.v-text;不能解析html语法的文本,和{{ }}效果相似 <p v-text="msg.split('')"></p> 3.v-html;会解析html语法 <p v-html="info"></p> 4.v-once;只能被解析一次 <p v-once>{{ msg + info }}</p>
面向对象js
<script> let obj = { name: 'Jerry', eat: function (food) { console.log(this.name + '在' + food) }, eat(food) { // 方法的语法 console.log(this.name + '在' + food) } }; // 调用 console.log(obj.name); obj.eat('hotdog');
js函数补充
<script> function可以作为类,内部会有this 箭头函数内部没有this {}里面出现的函数称之为方法: 方法名(){} </script>
方法/事件指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
属性指令
v-bind:属性="变量" | :属性="变量"
表单指令
<!-- v-model = "变量" 变量值与表单标签的value相关 --> <!-- v-model可以实现数据的双向绑定,变量值可以影响表单标签值,表单标签值也可以影响变量值 --> 单选框 <input type='radio' name='sex' value='male' v-model='v2'> <input type='radio' name='sex' value='feamle' v-model='v2'> v2:'male' 默认选中 单一复选框 <input type='checkbox' name='agree' v-model='v3'> v3:true/fales 多复选框 <input type='checkbox' name='hobbies' v-model='v4' value='male'> <input type='checkbox' name='hobbies' v-model='v4' value='female'> <input type='checkbox' name='hobbies' v-model='v4' value='other'> v4:[]
条件指令
<!-- v-show='布尔变量' 隐藏是采用display:none v-if='布尔变量' 隐藏时不渲染(保障不渲染的数据泄漏) --> <!-- v-if v-else-if v-else -->
斗篷指令
v-loak
循环指令
<i v-for="c in info">{{ c }} </i> <i v-for="(c,i) in info">{{ i }}:{{ c }}</i> i索引,c字符 info:['a','b','c'] info:'abcd' <i v-for="(v,k,i) in info">{{ i }}:{{ k }}:{{ v }}</i> info:{ 'name':'logan', 'age':23, }
前台数据库
- localStorage;永久存储
- sessionStorage;临时存储,所属页面被关闭时清空
分隔符
delimiters:['[{','}'] 修改差值表达式符号,当语法冲突时
过滤器
在filters成员中定义过滤器方法 可以对多个值进行过滤,过滤时还可以额外传入辅助参数 过滤的结果可以再次进行下一次过滤(过滤的串联) {{ 参数|方法 }} {{ a | f1 }} {{ a,b | f2 }} {{ a,b | f3(30,40) }} {{ a,b | f3(30,40) | f4 }} <script> filters:{ // 传入所有要过滤的条件,返回过滤的结果 f1(a,b){ return a+10 } }
计算属性
1.computed计算属性可以声明,方法属性(方法属性一定不能在data中重复声明 2.方法属性必须在页面中渲染才会启用绑定的方法,方法属性的值就时该方法的返回值 3.绑定方法中的所有变量对会被监听,任何一个变化发生,都会触发绑定方法,从而更新方法值 4.一般用于解决一个变量依赖于多个变量 被渲染时调用一次,内部变量发生改变时调用 {{ abc }} computed:{ abc(){ return 100 } }
监听属性
监听的属性需要在data中生命,监听的方法不需要返回值 监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法 监听方法有两个回调参数,当前值,上一次值 watch: { full_name(n, o) { this.first_name = n.split('')[0] this.last_name = n.split('')[1] } }