day 66

day66 vue

1. 前端框架；angular、react、vue

2. vue继承前两大框架的优点，摒弃了缺点

3. 缺点；没有前两大框架健全ECMAScript js ts比js强大

4. 优点；中文API（使用说明书），单页面应用，基于组件化开发，数据双向绑定，虚拟DOM，数据驱动思想(相比DOM驱动)

5. 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({})
   

6. 插值表达式

   {{ 内部最少要有一个空格 }}  只能用在挂载点标签的内部
   {{ a + b }}  可以进行简单的逻辑处理
   {{ a * 10 }}
   {{ msg[1] }}
   {{ msg.split('') }}
   

7. 文本指令

   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>
   

8. 面向对象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');
   

9. js函数补充

   <script>
   	function可以作为类，内部会有this
   	箭头函数内部没有this
   	{}里面出现的函数称之为方法： 方法名(){}
   </script>
   

10. 方法/事件指令

    v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
    

11. 属性指令

    v-bind:属性="变量"  |  :属性="变量"
    

12. 表单指令

    <!-- 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:[]
    

13. 条件指令

    <!-- v-show='布尔变量' 隐藏是采用display：none
    		 v-if='布尔变量' 隐藏时不渲染（保障不渲染的数据泄漏） -->
    <!-- v-if v-else-if v-else -->
    

14. 斗篷指令

    v-loak
    

15. 循环指令

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

16. 前台数据库

    1. localStorage；永久存储
    2. sessionStorage；临时存储，所属页面被关闭时清空

17. 分隔符

    delimiters:['[{','}'] 修改差值表达式符号，当语法冲突时
    

18. 过滤器

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

19. 计算属性

    1.computed计算属性可以声明，方法属性（方法属性一定不能在data中重复声明
    2.方法属性必须在页面中渲染才会启用绑定的方法，方法属性的值就时该方法的返回值
    3.绑定方法中的所有变量对会被监听，任何一个变化发生，都会触发绑定方法，从而更新方法值
    4.一般用于解决一个变量依赖于多个变量
    被渲染时调用一次，内部变量发生改变时调用
    {{ abc }}
    computed:{
    	abc(){
    	return 100
    }
    }
    

20. 监听属性

    监听的属性需要在data中生命，监听的方法不需要返回值
    监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
    监听方法有两个回调参数，当前值，上一次值
    watch: {
    		full_name(n, o) {
    			this.first_name = n.split('')[0]
    			this.last_name = n.split('')[1]
    		}
    	}