强某某
强某某

Vue基础入门

第一节(指令)

入门案例

{{msg}}

if else else-if


        
{{msg}}

        
{{msg1}}

        
其他情况

v-show


        
{{msg}}

v-show只是显示和隐藏，修改的是css属性，v-if是完全没有加载，减少请求，减轻服务器压力

v-for指令

v-for指令放在需要循环的标签上面，此时是li标签

 

        
    
            
  • {{item}}
    •

computed是vue提供的在数据输出之前需要进行的计算的方法，特别注意data里面的变量名(items)和computed里面的变量名不能相同(newItems),而且最后v-for指令使用的是newItems。

v-text和v-html

{{msg}}这种模式在网页加载缓慢和程序出错时候，会在html上面显示{{msg}}，体验不好。v-text是绑定数据，可以避免在msg数据请求未成功和代码异常的时候出现{{msg}}这样的错乱数据，会直接不现实对应的标签。v-html是插入html，注意避免xss攻击。

v-on指令

场景是绑定点击，键盘等事件


        
{{msg}}

v-model 双向数据绑定

基本案例


        
{{msg}}

说明：lazy，懒加载，在鼠标移出输入框时候才同步；number，只允许输入数字，会自动去除从第一处不是数字的部分往后的部分，但是注意，如果最开始就输入不是数字，则无效，效果等同于v-model;trim,去除前后空格。

多选绑定一个值

 

        
多选绑定一个值

type="checkbox"是多选，下面的msg可以是任何值，在后续切换中会自动转换为true和false，但是为了好理解，建议使用true和false。

单选绑定一个值


        
单选绑定一个值

        
        
        

        
{{msg}}

注意：下面的msg的内容必须和上面的value的某个内容对应，否则没有默认显示

多选绑定多个值


        
多选绑定多个值

        
        
        
        

        
{{msg}}

说明：注意msg必须是数组，否则会被当成布尔值处理，及要么全选要么全不选

v-bind

bind绑定的是标签的属性


    

        
       
        
        百度
        
        
{{isOk}}

        
        
{{isOk}}

        
        
{{isOk}}

说明：v-bind 简略写法:,注意html中的:class和:style

其他指令

v-pre:原样输出
v-cloak:渲染完成后才显示,避免错乱数据和v-text的区别是，text在vue对象没有的时候，及代码有重大错误时候，啥也不显示，但是v-cloak还会原样输出。

v-once:只在第一次渲染时候进行渲染，例如双向数据绑定时候，只想让某一处显示第一次渲染的值。

第二节(全局API)

在构造器外面利用vue提供的api构建新的功能，就叫做全局API

Vue.directive（自定义指令）

自定义指令有五个生命周期: bind:"被绑定"只执行一次,inserted:"绑定到节点",update:"组件更新",componentUpdated:"组件更新完毕"，unbind:"解绑".


    

        
{{msg}}

    





> 说明：利用directive自定义指令是在构造器外面，且自定义指令名称是不加v-的，此处直接是jspang,但是上面使用是v-jspang，注意自定义指令名称不要出现大小写间隔(例如jsPang),会无法识别然后报错。另外，传入的参数el指的就是
{{msg}}
这个dom对象，bindding指的是v-jspang="color"，bindding.value就是获取的值color,bindding.name就是jspang,可以打印看看bindding其他属性。而v-jspang="color"中的color就对应app对象中的green，从而产生效果。

Vue.extend(构造器延伸)

说明：构造器延伸一般和组件一起使用，此处只是基本展示。Vue.extend内部和vue的正常构造器一样是一个对象，对象内部是模板template，注意此时data是一个函数，然后return一个{}，内部按照正常构造器的data书写即可。最后一定要挂载，不挂载无效。new author().$mount("author");可以是标签，id和类的挂载形式。

Vue.set(全局操作)

js中数组中数据的更新(包括变更，数组长度变化等)，dom无法监听，所以提供set方法进行数组相关操作.

基本案例


    

        {{num}}

说明：三种方式都可以更改数据更新dom。

数组更新案例


    

        
    
            
  • {{index}}--{{item}}
    •

说明: 此时直接app.nums[0]="测试";是无效的，因为js不会监听到数组变化从而也就不会引起dom更新，但是如果在修改之前修改一下其他变量(非数组的)，就会引起dom更新，从而数组变化也会有效。注意：Vue.set操作普通数据和数组数据参数有区别.Vue.set(objData.nums,1,++objData.nums[1])其中1是数组索引，和Vue.set(objData,"num",++objData.num);

三种创建模板的形式

说明：script标签模板，必须添加type="x-template" ，最后都是靠给app构造器里面的template属性设置id,class等设置模板。

组件

自定义指令针对的是属性，而组件功能更强大，而模板是组件的一部分。

局部组件和全局组件

props传参基本案例

说明：模板中的{{info}}来源是props，注意props的值是数组，因为属性可能有多个，而props中的info对应的就是zengqiang标签中的info属性的值

props传参演化案例

说明： v-bind是绑定属性的，数据来源是data，后续关联关系等同于上个案例

父子组件

重要案例：

说明：dom是从上往下加载，所以子组件要定义在父组件上面，否则会报错。

component标签

动态绑定组件，根据数据不同绑定不同的组件

基本案例

说明：component一般和v-bind:is配合使用，对应值是构造器里面的data的数据，注意：components内部的key和value一定是key是字符串，不要弄反了。

第三节(构造器选项)

propsDataOption

说明：传参时候，必须用{}包裹propsData，而且还要在扩展里面添加props:["info"]，而且数组里面的元素要是字符串

computedOption

在渲染信息之前，进行的相关计算


   

       {{info}}
       

       
    
           
  • {{li.title}}---{{li.age}}
    •

MethodsOption


   

       {{info}}

说明：切记 components中key是字符串，如果在组件中使用构造器中的方法，需要添加native,构造器对应标签的外部使用构造器方法需要加上构造器对象的变量名称。另外$event包含点击事件相关信息，比如点击位置等，一般用于精确控制，普通场景不需要。

watchOption

用于监测某个数据，从而动态更新根据这个数据而变化的数据的内容


   

      {{msg}}--{{num}}

mixinsOption

混入 在构造器稳定的情况下，加入一些临时需求时候使用


   

      {{num}}
      

      

   





输出：
全局混入
内部混入
内部生命周期

说明：混入分为内部混入和全局混入，先执行全局混入对应的生命周期，然后才是内部混入的生命周期，最后才是构造器内部的生命周期函数。注意mixins(混入选项)是数组，可以是多个，后面的扩展选项只能是一个，要区分开。

extendsOption


   

      {{num}}
      

      

   





输出：
原生方法
扩展生命周期
内部生命周期

说明：注意扩展只是一个对象，不是数组，extends:extendObj，另外，当扩展和原生方法同名的时候，只执行原生方法，例如此时的add方法，另外扩展的生命周期执行先于内部生命周期。

替换插入符号

在一些例如织梦系统里面可能是Vue自带的{{}}插入符号冲突，可以通过delimiters自定义插入符号.


   

      ${num}

说明：此时只能通过${}来插入数据，之前的{{}}无效了.

第四节(实例和内置组件)

实例，就是在构造器外面可以调用构造器内部的方法，给其他框架提供一个和vue一起使用的接口

rumen


   

        {{num}}

说明：jquery只有在mounted和updated之中才能使用，因为一个是dom挂载一个是dom更新。另外可以通过构造器名称.方法名直接在外部调用构造器内部的方法。

exampleMethod


    

        {{num}}

exampleEvent(实例事件)

在实例外部创建一个构造器的事件，好处是可以在外部调用构造器的数据和方法等。

基本案例：

    

        {{num}}

说明：button的点击事件按照js正常写法，构造器对象通过on绑定方法名，通过once绑定只执行一次的方法，但是button是我无法直接调用构造器的方法的，通过emit触发。关闭事件的时候，不使用on,而是直接off传入对应的方法名即可。

slot

slot是标签内容扩展，使用slot可以在自定义组件传递给组件内容，组件接受内容并输出。


    

       {{info}}

说明：组件传递数据的流程：首先，定义组件的地方，使用通过标签的name属性，关联构造器里面的data中的info，在使用组件的时候，中通过slot属性关联标签中的name属性，从而渲染数据。注意，这种定义组件方式，