vue_baselearning

Vue基本入门知识点整理

Vue基本架构：

<div id="app">
  {{templete}}
</div>

const app = new Vue({
  el:"#app",
  data:{
    templete:"VUE"
  },
  methods:{
    
  }
})

el是绑定选中的元素的作用域，不可绑定在Html和body标签，里面可以绑定其他DOM元素，例如id,class,标签等，对应着#id，.class，标签等

Vue在body里面定义的元素数据,用到的数据定义在data中,data中可以写复杂类型的数据，渲染复杂类型的数据时，遵守js的语法即可

---

Vue函数：

• v-text

  <div id="app">
  	<h1 v-text="context_name+'lalala'">哈哈哈</h1>//输出“他在lalala”
  	<h1 v-text="context_name">呵呵呵</h1>//输出“他在”
  	<h1>{{message}}咳咳咳</h1>//输出“我在咳咳咳”
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"我在",
        contex_name:"他在"
      }
    })
  </script>

v-text指令的作用是：设置标签的内容（textContent）

默认的写法会替换全部内容，使用差值表达式可以替换指定内容

内部支持写表达式

• v-html

  <div id="app">
  	<h1 v-html="baidu">哈哈哈</h1>//输出一个普通文本字符
    <h1 v-html="baiduurl">哈哈哈</h1>//输出一个超链接字符
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        baidu:"百度",
        baiduurl:"<a herf="https://www.baidu.com">百度</a>"
      }
    })
  </script>

v-html指令的作用是：设置元素的innerHTML

内容中有html结构会被解析为标签

而对于v-text，v-text指令无论内容是什么，都只会解析成文本

解析文本使用v-text，需要解析html结构使用v-html

• v-on基础

  <div id="app">
    <input type="button" value="鼠标单击" v-on:click="do" />
    <input type="button" value="鼠标移入" v-on:click="do" />
    <input type="button" value="鼠标双击" v-on:click="do" />
    <input type="button" value="鼠标双击简写" @dblclick="do" />
    <h2 @click="changeword">{{name}}</h2>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        name:"小白"
      }，
      methods:{
      do: function(){
      alert("你触发了");
    	}
    	changeword: function(){
  		this.name += 小白
      }
    }
    })
  </script>

v-on指令的作用是：为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

• v-show基础

  <div id="app">
    <input type="button" value="显示/隐藏文字" v-on:click="show" />
    <h2 v-show="isShow">你看到我吗</h2>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isShow:true
      }，
      methods:{
      show: function(){
      this.isShow = !this.isShow;
    	}
    }
    })
  </script>

v-show指令的作用是：根据真假切换元素的显示状态

原理是修改元素的disalay，实现显示隐藏

指令后面的内容，最终都会解析成布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

• v-if

  <div id="app">
    <input type="button" value="显示/隐藏文字" v-on:click="show" />
    <h2 v-if="isShow">你看到我吗</h2>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isShow:true
      }，
      methods:{
      show: function(){
      this.isShow = !this.isShow;
    	}
    }
    })
  </script>

v-if指令的作用是：根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树种，为false，从dom树中移除

• v-bind

  <style>
  .abc{
   	 border: 1px solid red;
   }
  </style>
  
  <div id="app">
    <input type="button" @onclick="show">
    <img v-bind:src="imgSrc">
    <img v-bind:title="imgtitle">
    <img v-bind:class="ifShowClass:'classname':''">//三目运算符方式
    <img v-bind:class="{classname:ifShowClass}">//对象方式
  </div>
  
  <script>
  const app = new Vue({
    el:"#app",
    data:{
      imgSrc:"./图片地址",
      imgtitle:"图片名称",
      ifShowClass:false,
      classname:"abc"
    },
    methods:{
      show:function(){
        this.ifShowClass =!this.ifShowClass; 
      }
    }
  })
  </script>

v-bind指令的作用是：为元素绑定属性

完整的写法是 v-bind:属性名

简写的话可以直接省略v-bind，只保留 :属性名

需要动态的增删ckass建议使用对象的方式

• v-for

  <div id="app">
    <ul>
      <li v-for="item in arr">第{{index+1}}个是{{item}}</li>//跟for in里面的索引不同
      <li v-for="(item,index) in arr1">{{index}}今年{{item.name}}岁了</li>
    </ul>
  </div>
  
  <script>
  const app = new Vue({
    el:"#app",
    data:{
      arr:["a","b","c","d","e"],//数组
      arr1:[{
        "小明":13,
        "小绿":15
      }]//对象数组
    },
    methods:{
      
    }
  })
  </script>

v-for指令的作用是：根据数据生成列表结构

数组经常和v-for结合使用

语法是(item,index) in 数据

item和index可以结合其他指令一起使用

• v-on补充

  <div id="app">
    <input type="button" @click="lalala(1,2)" />
    <input type="text" @keyup:enter="test" />
  </div>
  
  <script>
  const app = new Vue({
    el:"#app",
    data:{
      
    },
    methods:{
      lalala: function(p1,p2){
        console.log(p1);
        console.log(p2);
      }
      test: function(){
    	alert("test");
  		}
    }
  })
  </script>

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法是需定义形参来接收传入的实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有很多种，具体更多详情请看文档 Https://cn.vuejs.org/v2/api/@v-on

• v-model

  <div id="app">
    <input type="text" v-model="message" />
    <h2>{{message}}</h2>
  </div>
  
  <script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"nihaoa"
    },
    methods:{
      
    }
  })
  </script>

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据⬅️➡️表单元素的值