vue初学习（一）—— 基础指令

r囧r小猫 2023-03-12 09:24 16阅读 0赞

### 初步认识vue ###

一、Vue特点，  
Vue是不兼容ie8以及以下，因为Vue使用了不兼容ie8以及以下的es5的语法

1.  易用，偏重于应用
2.  灵活： 完整的生态系统
    
    1.  小米公司： 手机、电视、电脑、衣服、智能家居、。。。
3.  高效
    
    1.  vue.js的原文件很小
    2.  性能高

二、 Vue为什么性能高？

*  应该Vue使用了 虚拟DOM 技术

三、 虚拟DOM是什么呢？

*  使用js对象模型来模拟真实DOM节点

四、Vue是一个MVVM类型框架，M V VM

五、什么是MVC

*  MVC其实一个架构思想，指的是讲一个软件【应用】分为三个部分
    
     *  M Model 模型 --> data 数据
     *  V View 视图 --> 界面
     *  C Controller 控制器 --> 处理业务逻辑
 *  MVC思想来源于后端

六、什么是jsx?（后面的\{ \{\}\}里面可以写js语法就是这个的体现）

*  javascript + xml
    
     *  xml就是标签化语法
 *  在标签里面写js

--------------------

### 基础指令 ###

1.  什么是指令
    
     *  指令其实就是一个属性
2.  指令是用来干什么的呢？
    
     *  指令是使用操作DOM
3.  Vue提供了14个内置指令，供我们使用

--------------------

1、双大括号语法 \{ \{\}\} \{ \{\}\}里面就可以写js语法了，这就是所谓的jsx

2、当我们引入vue.js之后，vue会注册一个Vue全局函数 window.Vue = functioin () \{\}

3、Vue是一个构造函数 =》 可以实例化

4、const vm = new Vue（） ，可以这样写，也可以直接写 new Vue()就行

5、new Vue() 要有el来挂载才行，一般这个el都是元素的id,不然没法触发执行

--------------------

**v-bind:指令：** 单向数据绑定 ，将数据赋值给属性值

<div id="app">
        <h2> 单向数据绑定  v-bind  将数据赋值给属性值 </h2>
          <img v-bind:src="pic" alt="">
          
          <img :src="pic" alt="">

new Vue({ 
        el: '#app',
        data: { 
          pic: 'url'

--------------------

**v-model:** 双向数据绑定，类似两边写会相互影响,绑定的是== 数据 ==！！！！这个绑定的数据就是这个input框输入的东西

*  仅仅是应用于表单元素
    
     *  v-model默认绑定了表单元素的value属性
     *  含义
        
         *  数据改变，视图也会随之改变
         *  视图改变，数据也会随之改变

<h2> 双向数据绑定  v-model </h2>
        <div>
          <label for=""> 用户名 </label>
          <input type="text" v-model = "username">
        </div>
        <div>
          <label for=""> 密 码 </label>
          <input type="text" v-model = "password">
        </div>

new Vue({ 
    	    el: '#app',
    	    data: { 
    	      username: '',
    	      password: '',

这种是指在vue控制台和视图之间的可以实现双向数据交换，v-model还有其他的用法，表单中的还有其他的v-model的用法

--------------------

**数据展示指令：** v-text v-html

**\{ \{\}\} vs v-text vs v-html 区别**

*  v-text 和 v-html 写法和结果是等价于 \{ \{\}\}
 *  \{ \{\}\} 语法呢在刷新页面的时候，会出现闪现问题
 *  v-text 和 v-html 是没有的
 *  v-html会解析标签语法

--------------------

**条件渲染：v-show v-if**

条件渲染实现方式

1.  条件展示
    
    1.  v-show
        
        1.  控制的是元素的 display 样式
        2.  如果初始条件为 false , 元素也会渲染，所以初始渲染开销较高，
        3.  v-show的切换开销较低
2.  条件判断 == 适用于通过一个逻辑判断来决定点击出现酱紫的==
    
    1.  v-if v-else v-else-if
    2.  如果初始条件为 false , 元素不会渲染，渲染开销较低
    3.  条件判断的切换开销较高，因为它要不断的生成和销毁元素

<div id="app">
    	    <h2> 条件展示 v-show </h2>
    	    <div class="mask" v-show = "flag"> 模态框 </div>
    	    //这里的模拟块渲染了 但是没有展示的意思，所以上面说的初始条件为false元素也会渲染的意思

new Vue({ 
        el: '#app',
        data: { 
          flag: false

条件判断

<h2> 条件判断 </h2>
          <h3> 单路判断 </h3>
            <p v-if = "f"> NBA - 詹姆斯 </p>
            //这时f为false时不能显示詹姆斯
            
          <h3> 双路判断 </h3>
            <h4> 女孩 选择  两个男孩中的一个 </h4>
            <p v-if = "choose"> AA </p>
            <p v-else> BB </p>
    		//这时choose为true就显示AA，false就显示BB
    
          <h3> 多路判断 </h3>
            <input type="text" v-model = "grade">
            <p v-if = "grade >= 80"> 优秀 </p>
            <p v-else-if = "grade >= 60"> 良好 </p>
            <p v-else = "grade < 60"> 不及格 </p>
    		//这里是双向数据绑定的，修改了input框里面的数值就相当于修改了data中的数值，从而达到更改判断条件的操作

new Vue({ 
    	    el: '#app',
    	    data: {  
    	      grade: 60
    	    }
    	  })