VUE-Day03组件开发

 

复习:

①指令

vue自动将内存放入界面,不同位置需要不同指令

数据放到内容中,使用双花括号{{}},插值语法

  1. 数据放到属性中动态绑定,用冒号:

反复根据数组中元素生成多个元素v-for

控制一个元素显示隐藏v-show

多个元素选其一显示v-if

绑定事件@

事件处理函数写在methods中

如何获得鼠标位置,第一步绑定的时候使用$event关键字传入事件对象,然后在处理函数中用e接住

阻止默认行为e.preventDefault();

取消冒泡stop

按回车触发@keyup.13

绑定内容特殊情况,内容不是文本是HTML片段,此时双花括号绑定会保持原样,内容不会被编译,要用v-html

v-text效果等同于{{}}

在vue组件加载完之前临时隐藏绑定元素,防止用户看到双花括号语法,v-cloak使用时需要定义属性选择器[ v-cloak ] {display:none}

v-pre保护内容中的双花括号语法不被编译

v-once只在开始时绑定一次,之后不再绑定,即使模型数据改变也不变

 

12个指令都是单向的,只能将内存model中的数据绑到视图界面view中,收集用户信息需要用表单元素,必须要双向绑定v-model

 

文本框,文本域都是让用户填写内容的,这种都保存在value中,所以v-model会自动绑定value,当value发生变化会自动更新model中的变量。

但是有一些元素value是写死的,比如说radio,它的绑定原理有两个方向,首先将模型数据绑定到界面时,它是拿被绑定的模型变量和radio上的值作比较,只有相等时才会被选中,当选中某一个radio时,它会反向将当前选中的radio的value自动更新到内存中。

checkbox单独使用时,只能改checked的属性,选中就是checked,使用时只需要把布尔值绑给checked就可以了。

select,value是写在每一个option上的,但是v-model要写到select上,因为切换选中项时改的不是option的value而是改的整个select的value,当绑定时,会拿变量值和每个option比较,那个相等选那个,修改选中项之后,会自动更新回到value中。

这四个表单元素,无固定规律,分别看待。

 

双向绑定原理,其实是依靠一种监视机制来实现,比如知道vue中写一个死循环(有很多方法制作死循环扫描界面,while,for,setInterval),当界面发生变化时自动更新内存中的变量,借助此机制,只要变量发生变动(写在watch中,监视谁就写谁),以此达到只要模型变量变化就能自动完成一件事情。

new Vue({

    el:"#***",

    data:{...},

    watch:{

        模型变量(){

            this.模型变量名...

        }

    }

})

 

class和style,如果批量绑定样式,class更好,有两种方式,第一种把class当做字符串绑定,一个元素中可以写两个class,写死的不会变的放在正常class,:class中放入只发生变化的类名。这个类名就是一个模型变量,在内存的模型变量中存着这些要使用的类名。另一种class方式,就是对象方法。

style用于精细控制元素的位置,或者某一个css属性。style用拼接字符串方式很不直观,所以推荐用对象方式:style中只写一个变量名,在模型中为变量创建一个对象,其中包含所有需要用的css属性和值。

 

界面上一切东西都可以绑定,属性、内容、样式,必须遵循两步骤,第一找变化(把界面中所有可能变化的地方发掘出来,然后把这些地方换成vue的绑定语法),第二定义获取模型数据(界面上有多少变化,内存模型中就要有多少数据来支持它),做vue的套路,找一切变化,改绑定语法,在内存中,想尽办法提供支持数据。  

vue从根本上属于遥控页面,只操作数据,页面是不动的,用数据遥控页面的变化。

 

②计算属性

页面中有一种特殊的属性,数据库中没有保存,但是页面却要显示,这就是computed计算属性,这种属性一般是依靠其他模型变量计算获得的,普通方法也是可以的,但是效率较低,每次使用都需要重新计算,但是computed可以缓存起来这个结果。计算属性绑定方式和普通属性是一样的。

 

③过滤器

原始的东西不能直接使用,所以需要先加工再使用,接收一个参数返回一个新值,过滤器的本质其实就是一个函数。

filter,之所以用静态方法,是因为过滤器是很大可能需要重复使用的,所以独立于任何实例之外。

Vue.filter('过滤器名',function(val,参数1,...){

     ...val 接受当前要处理的模型数据的原始值

        return...;    

})

根据不同的参数值,返回不同的新值,利用参数控制过滤器的结果。

 

自定义指令:

如何:

  Vue.directive("指令名",{

     inserted(){  //指令所在的元素被加载到DOM树上后自动执行指令

          // elem 会自动获得指令所在的当前元素

            对elem执行DOM操作! 

     }

  })

使用:<any v-指令名>

示例:<div id="app">

            <input v-my-focus><button></button>

        </div> 

        <script>

            Vue.directive("my-focus",{

                     inserted(elem){

                           elem.focus()

                    }

             })

            new Vue({

                    el:"#app",

                    data:{}

            })  

       </script>

注:①自定义的指令不支持驼峰式写法,所以指令命名统一变为小写,或者用-或_分割。

    ②HTML/CSS/JS都是顺序执行的,所以在new Vue之前要准备好所有需要的东西,否则如果directive在下面,new实例检索DOM树的时候v-my-focus指令因为尚未搭建所以会无法识别。

 

 

AXIOS:

什么是:专门发送http请求的函数库(所谓http请求就是AJAX)

为什么:

   ajax的几种方式:①自己封装(四步)

                             ②jQuery:$.ajax()  引入整个jq函数库而只使用ajax,小题大作

                             ③Vue有一个组件resource,已不推荐使用

                             ④Axios 管方推荐

Vue本身和ajax是没关系的,所以找到Axios处理此类需要。Vue和Axios二者也是没有必然联系的。

如何:①引入axios.min.js  //当引入axios文件时,其实就是引入axios对象

        ②发送两种请求

        get请求:

        axios.get("url",{

            params:{

                 参数:值

            }   

        }).then(res=>{

                获得服务端返回的结果:res.data

        })     

        post请求:

        axios.post("url","变量=值&变量=值&...").then(res=>{...}) 

 

        

组件化开发:

什么是组件:拥有独立的HTML,CSS,JS和数据的页面独立区域

什么是组件化:今后所有页面都是由多个页面组成的

                       每定义一个网页都要先划分组件结构,再分别编写每个组件。

为什么:

(1)重用

(2)便于大项目的分工协作

(3)松散耦合

如何:

①创建组件

每个组件包含三部分:HTML/JS:<script>/CSS:<style>

1.专属的HTML片段

ps:组件的HTML片段必须被一个唯一的父元素包裹,<template>专门保存片段

<template  id="选择器">

   <div>

         <button @click="change(-1)">-</button>

         <span>{{count}}</span> 

         <button @click="change(+1)">+ </button>

   </div>  

</template>

2.专属的JS和数据

<script>

   Vue.component("组件名",{

       template:"选择器",//代替el,每创建一个组件,会自动代替组件标签的位置,组件是创建之后根据需求调用它的副本,template(模板)

       data:function(){

             //每创建一个组件的副本,就自动调用过一次,为当前新副本创建一个专属的模型数据对象 

             return{ //原来的data 

                  count:1

             }

       }

       //其余和new Vue()完全一样

       methods:{

           change(i){

              this.count+=i;

              if(this.count==0)

              this.count=1

           }

       }

   })

   new Vue({    //选择器必须在有Vue实例前提下

       el:"#app",

       data:{}

   })

</script>

<div id="app"> <!--主界面-->   

    <组件名></组件名> 

</div>

1.封装template,html结构 2.创建component,组件功能 

②使用组件

组件其实就是一个标签名

只要在主内容中,添加一个<组件名></组件名>,运行时Vue就会用组件的template代替<组件名>标签所在位置

③组件分类

1.new Vue({              //根组件

       el:"#app",

       data:{} 

}) 

2.Vue.component("组件名",{            //全局组件:可在任意位置随意使用的组件

        template:"#tplxxx",

        data:function(){ return{} }      

})

3.子组件:仅限于在某个父组件内才能使用的组件

   如何:2步

      (1)只要将Vue.component降级为普通对象

              强调:变量名用标签名(将来组件名)的驼峰方式

      (2)在父组件中添加components属性:{

              子组件变量名,子组件变量名,  //ES6简写

       }

       Vue会将驼峰命名的组件名,转为小写,并用-分隔

               比如:todoAdd -> todo-add

                          todoList -> todo-list

 

posted @ 2020-03-20 17:34  AZUKI七  阅读(122)  评论(0编辑  收藏  举报