【Vue】Vue基础知识点介绍（入门级，简单易懂）——day01

大家好，从今天开始，会每天分享vue学习的知识点，一起加油~

①首先，牢记三个单词   bind绑定，property属性，mount挂载

1、Vue概述

1.1 特点

• 尤雨溪创造，V2 与 V3流行
• Vue是一套用于构建用户界面的渐进式框架
• 结合了angular的指令与react的组件，虚拟dom

1.2 优点

• 中文文档完备，生态丰富（插件多），上手简单
• 指令，组件，虚拟dom

2、导入与实例化

step1 引入

或者引入  

  //需要在目录下放vue.js 文件

step2 模板

    
{{msg}}

step3 实例化

3、指令与模板

指令就是v开头的特殊属性，它的值预期为JavaScript单行表达式。

指令是联系模板与vue实例的桥梁。

3.1特点

• 可以渲染实例的值 v-text="msg"
• 可以使用数学运算v-text="2+3"
• 可以使用js表达式v-text="msg.length"
• 如果是文本，需要加单引号v-text=" '我在中国。' + msg"

4、vue的实例

var vum = new Vue({...})

//vm就是new Vue创建的实例

5、文本渲染指令

{{}}

    
{{msg}}
    
{{2+3}}
    
{{2+3}}
    
{{msg.split('').reverse().join(' ')}}
    
{{2+3>8?'大于':'小于'}}

v-text

6、条件渲染指令

v-if

    

        
武林大会
        
好徒儿，师妹就托付给你了~~~
        
去面壁思过三月
    
    
    

v-else

    

        
武林大会{{score}}
        
独孤九剑
        
葵花宝典
        
三分归元气
        
小师妹嫁给你
        
赶出师门
        
    

    
    

v-else-if

    

        
武林大会{{score}}
        
独孤九剑
        
葵花宝典
        
三分归元气
        
小师妹嫁给你
        
赶出师门
        
    

    
    

v-show

    

        
 v-show 和 v-if 区别
        
你好 我是v-if
        
hello 我是v-show
    

    
    

 特点：

• 隐藏元素以css方式
• 频繁切换用v-show
• 少量切换用v-if

【面试题】  v-if 与 v-show 区别

1.都是用来控制显示与隐藏

2.v-if是通过dom操作实现隐藏，v-show通过css方式隐藏

3.频繁切换用v-show ,少量切换用v-if

7、遍历指令

v-for

    

        
 v-for
        
{{item}}
        

            
{{index+1}}--{{item}}
        
        
{{item}}
    

    
    

v-for代码运行结果 

v-for特殊用法

    

        
 v-for
        
        
{{item}}
        
        
{{item}}
        
{{key}}:{{item}}
        
        
{{item}}
    

    
    

v-for特殊用法 运行结果

 

v-bind:key

• 值必须是唯一
• 为了让Vue更好的优化渲染列表

8、属性绑定

v-bind

• 使用v-bind 指令给html标签动态的绑定属性
• :title 是 v-bind:title的简写
• :id是v-bind:id 的简写
• :key是v-bind:key的简写

    

        
属性绑定
        
 attribute
        按钮
    
    
    

v-bind运行结果 

9、事件绑定

v-on

• 可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。
• v-on:click="  "  的简写是 @click=" " 

    

        
事件绑定
        {{num}}
        
        {{num}}
    

    
    

10、案例选项卡

css样式

js 和 html

    

        
选项卡
        
        
        Vue
        React
        angular
        

            Vue的文章列表
        
        

            React的文章列表
        
        

            angular的文章列表
        
    

    

    

今天的分享就到这里了~