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,
}

前台数据库
1. localStorage；永久存储
2. 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]
        }
    }

day 66

day66 vue

猜你喜欢