为了账号安全,请及时绑定邮箱和手机立即绑定
  • v-html指令会将字符串中<h1>等认为是html语法元素,

    v-text指令则会将字符串中<h1>等认为是普通的文本,这时候,就说<h1>标签被“转义“了,也就是从特殊含义的字符转义为普通字符了。

    04:05
    看视频
  • scoped :域修饰,进队当前域生效

    03:41
    看视频
  • v-module:数据双向绑定

    :value:数据单向绑定

    07:56
    看视频
  • v-show :仅将该元素隐藏,不删除元素,性能高一些

    v-if :会销毁或创建DOM中元素

    v-for :循环

  • computed:计算属性,一个属性是根据其他属性值计算出来的结果,仅当需要计算的参数发生变化是才会重新进行计算,否则取的是缓存中的值;

    watch:侦听器,监听某一个数据的变化

  • 计算,属性,效率高。它是有其他属性计算,而来。如果依赖的属性没有发生变化。他会从缓存中读取,知。只有当他依赖的属性,当中的任一个,发生变化。他才会重新计算。
    05:55
    看视频
  • 对于根实例来说,如果没有模板,他会把挂载点的所有内容作为模板

  • 挂载点 v-text ,v-content 插入表达式 {{ }} 挂载点,模板,事件,
    00:38
    看视频
  • 每一个组件都是一个Vue的组件实例,实例的模板里使用一个小的组件。

    每一个组件也可以写methods,data。因此每一个组件都是一个Vue的实例。


    如果不定义模板,就会根据挂载点下面的DOM标签标签全部内容当做模板。


  • 通过this调用vue实例的data属性

    list.push往列表里添加值

    如下this.inputValue=''让提交后input框清空


  • 1、v-if和v-show区别:展示的效果一样,但是 v-if(控制dom的存在与否)是通过删除/增加代码的方式来隐藏/显示内容;v-show(控制dom的显示与否)是通过改变css代码来显示/隐藏元素内容。

    2、在使用上的建议:页面内如果需要频繁的显示隐藏dom,就是用v-show,这样不会删除掉代码,如果只需显示隐藏一次就使用v-if 。

    <!DOCTYPE html>
    <html>	
    <head>	
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>			
    </head>	
    <body>		
        <div id="root">			
            <div v-if="show">hello world</div> <!-- v-if可以换成v-show -->		
            <button @click="myClick">toggle</button> <!-- v-on的简写@ -->		
        </div>		
        <script>			
            new Vue({				
            el:"#root",				
            data:{					
                show:true				
                },				
            methods:{					
            myClick:function(){					
            this.show=!this.show;<!-- 反复点击按钮可以让show反复显示/隐藏 -->
             }
            }
            })
        </script>
        </body>
        </html>

    3、v-for做页面上循环内容的展示 :key可以提升每一项渲染的性能,但是要求:key要求:key值也就是每一项循环的内容都不同。

    <!DOCTYPE html>
    <html>	
    <head>		
        <meta charset="utf-8">		
        <title></title>		
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>			
    </head>	
    <body>		
        <div id="root">			
            <ul>				
            <!-- <li v-for="item of list" :key="item">{{item}}</li> 这句循环list内容,把每一次循环显示在item里-->				
            <li v-for="(item,index) of list" :key="index">{{item}}</li><!-- 这句优化上面的:key因为key值不能相同,每一次循环列表得到item和数组下标index,将key值换成index值就不会有相同 -->			
            </ul>		
        </div>		
    <script>			
        new Vue({				
        el:"#root",				
        data:{					
        list:[1,2,3]				
            }		    	
         })		
    </script>
    </body>
    </html>


  • 计算属性computed  一个属性通过其他属性计算得来(例:fullName通过firstName+lastName得来)

    侦听器watch  进行数据侦听,然后进行某些操作(例:侦听fullName,进行count++计算fullName长度)

    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
         <script src="./vue.js"></script>
         </head>
         <body>
             <div id="root">
                         姓:<input v-model="firstName"/>
                         名:<input v-model="lastName"/>
                         <div>{{fullname}}</div>
                         <div>{{count}}</div>
                     </div>    
                     <script>
                             new Vue({       
                                 el:"#root",         
                                 data:{                
                                     firstName:'', 
                                     lastName:'',               
                                     count:0           
                                     },
                                 computed:{
                                         fullName:function(){
                                             return this.firstName+""+lastName
                                         },
                                 wacth:{
                                          fullName:function(){
                                              this.count++
                                          }
                                      }
                                   })             
            </script>
            </body>
    </html>


  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div v-bind:tittle="tittle">hello world</div><!-- v-bind:tittle可以写为:tittle,"tittle"与data里的tittle绑定 -->
            <input v-model="content"/>
            <div>{{content}}</div>
        </div>
        <script>
            new Vue({
                el:"#root",
                data:{
                    tittle:"this is hello world",
                    content:"this is content"
                }
            })
            
        </script>
    </body>
    </html>

    v-bind:tittle="tittle" 单向属性绑定,与data里的tittle绑定,v-bind:简写为 :

    v-model:为双向数据绑定,div中某一个标签的值(例:input标签里的内容)发生变化后,可以改变vue实例中data属性相应的对象值;vue实例中的属性对象值发生改变,div标签值也会发生改变。

  • data:数据

    template:模板

    v-text: 会转译

    v-html: 不会转译

    v-on:  事件绑定v-on:的简写为@符号

    <div v-on:click myClick>{{content}}</div>

    //myClick函数内容写在 vue里的method里

    <script>

        new Vue({

            el:"#",里面绑定一个id

            data:{

                content:"hello"

    },

                method:{

                            myClick:function(){

                                this.content="world"

    }

    }

    }

    })

    </script>

  • 组件里面的data的简化写法 

    05:52
    看视频
  • 组件里面的data 是个对象 

    data: function ( ) { 

      return { }

    }

    05:21
    看视频
  • vuejs 入门:

    1. 用script 标签在页面的<head>里引入vue.js:  <script src="./vue.js"></script>

    2. 页面中实例化一个vue的类;<script>new vue({el:"#root",data:{msg:'hello word!'}})</script>

    3. <div id="root"></div>

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对Javascript基础知识已经掌握。 2、对Es6和webpack有简单了解。
老师告诉你能学到什么?
使用Vue2.0版本实现响应式编程 2、理解Vue编程理念与直接操作Dom的差异 3、Vue常用的基础语法 4、使用Vue编写TodoList功能 5、什么是Vue的组件和实例 6、Vue-cli脚手架工具的使用 7、但文件组件,全局样式与局部样式
意见反馈 邀请有奖 帮助中心 APP下载
官方微信