Vue2.0 梳理系列 | 基础语法-CSDN博客

本文链接：https://blog.csdn.net/HFunTeam/article/details/119013658

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

从1989年 Tim 发明了超文本标记语言 HTML 开始，前端的发展就此开始了。从开始的静态网页，再到 ASP、JSP 和 PHP 等创建动态 HTML 方式的诞生，之后是 JavaScript的加入，JavaScript 操作 HTML，JQuery 的诞生。从 MVC 模式演变到 MVVM框架模式等等，前端在悄无声息间茁壮成长。

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed。2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。2014.01.24，Vue 正式对外发布，版本号是 0.8.0。

2015.10.26，vue-router、vuex、vue-cli 相继发布，标志着 Vue 从一个视图层库发展为一个渐进式框架。2016.10.01，Vue 2.0 发布，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

本系列旨在梳理 Vue 2.0 相关知识，接下来让我们一起Vue的旅途吧！

基础代码组成

methods 定义方法，function 函数，Mustache 写作{{}} 显示数据，data里 function (组件当中 data 必须是一个函数)

<body>
    <div id="app">{{message}}</div>     <!-- 3.参数挂载元素-->
    <script src="../js/vue.js"></script> <!--  1.引用vue.js-->
    <script>                       // 2.创建的Vue实例
      // let定义变量/const定义常量   
      const app=new Vue({
          el:'#app',             // 挂载
          data:{                 // 定义数据对象
              message:'你好!!!'
          }
      })
</script>
</body>

v-once

不会随界面改变而改变后面不用加表达式

 <h2 v-once>{{message}}</h2>

v-for

列表给数组追加元素时，新元素也可以在界面展示

<ul>
    <li v-for="item in movies">{{item}}</li>
</ul>

v-html

以 html 的形式展示

<div id="app">
    <h2 v-html="url"></h2>
</div>          
<script src="../js/vue.js"></script>
<script>                      
    const app=new Vue({
        el:'#app',            
        data:{                 
            message:'你好!!!',
            url: '<a href="http://baidu.com">百度一下</a>'
        }
    })
</script>

v-text

和 Mustache 相似通常情况，接受一个 String 类型更多的用 {{}}

<h2 v-text="message"></h2>

v-pre

把内容原封不动展示

<h2 v-pre>{{message}}</h2>

v-cloak

解决插值表达式闪烁问题

<style>
    [v-clock]{
         display: none;
     }
</style>
<div id="app" v-clock>

v-bind

（1）动态绑定属性简写：

 <div id="app">
     <img :src="imgURL" alt="">    <!--解析指令 动态绑定-->
     <a :href='aHref'>百度一下</a>
 </div>
 <script src="../js/vue.js"></script> 
 <script>
     const app=new Vue({
         el:'#app',
         data:{
             message:'你好',
             imgURL: 'https://imgoss.ilive.cn/image/202106/24/1624493801727_365x204.jpg',
             aHref: 'http://www.baidu.com'
         }
     })
</script>

（2）动态绑定 class（对象语法）

<style>
   .action{
       color:red;
   }
</style>
 <div id="app">
     <h2> class="active">
       {{message}}
     </h2>
     <h2> v-bind:class="{类名1：boolean,类名:2boolean}">
     {{message}}
     </h2>        
    // boolean为true类被添加 false不被添加      
     // 第一个class固定 第二个class可变
     <h2 class='title' v-bind:class="{action:isActive, line:isLine}">
       {{message}}
     </h2>
     <button v-on:click="btnClick">按钮</button>   <!--监听-->
</div>
<script src="../js/vue.js"></script> 
<script>
   const app=new Vue({
       el:'#app',
       data:{
           message:'你好',
           isActive:true,
           isLine:true
       },
       methods: {
           btnClick:function(){
               this.isActive= !this.isActive  //取反
           }
       },
   })
</script>

（3）动态绑定 style（对象语法）

 <div id="app">
     <!--50px必须加'',否则当作变量去解析
     <h2:style="{fontSize(属性名):'50px（属性值）'}">{{message}}</h2>-->
     <h2 :style="{fontSize: finalSize + 'px',color: finalColor}">
       {{message}}
     </h2>
 </div>
<script src="../js/vue.js"></script> 
<script>
   const app=new Vue({
       el:'#app',
       data:{
           message:'你好',
           finalSize: 100,
           finalColor: 'red'
       }
 })
</script>

v-on

（1）监听某个元素的点击事件简写 @

<button @click="isUser = !isUser">切换类型</button>

（2）参数传递问题

  <div>
     <!--1.事件调用方法没有参数-->
     <button @click="btn1Click">按钮1</button>
     <!--2.在时间定义时，写函数是省略了（），但是方法本身需要一个参数 ，
     Vue会默认将浏览器生成的event对象作为参数传入到方法-->
     <button @click="btn2Click">按钮2</button>
     <!--3.手动获取浏览器参数event对象：$event -->
     <button @click="btn3Click(123,$event)">按钮3</button>
     <button>按钮3</button>
 </div>     
 <script src="../js/vue.js"></script>
 <script>                
   const app=new Vue({
       el:'#app',          
       data:{               
           message:'你好!!!'
       },
       methods: {
           btn1Click(){
               console.log("btnClick");
           },
           ///按钮2- event
           btn2Click(event){
               console.log(event);
           },
           btn3Click(abc,event){
               console.log(abc,event);
           }
       }
   })
</script>

修饰符：

（1）stop

<button @click.stop="btnClick">按钮</button> <!--阻止冒泡-->

（2）prevent

 <!--阻止默认行为-->
 <input type="submit" value="提交" @click.prevent="submitClick">

（3）enter

<!--监听某个键盘的键帽-->
<input type="text" @keyup.enter="keyup">

（4）once -- 只触发一次回调。

（5）native-- 监听组件根元素的原生事件。

v-if 、v-else、v-else-if、v-show

前三个指令与 JavaScript 的条件语句 if、else、else if 类似。

（1）v-if

后面的条件为 false 时，对应的元素以及其子元素不会渲染

 <div id="app">
    <h2 v-if="isShow">
        {{message}}
    </h2>
 </div>        
<script src="../js/vue.js"></script>
<script>                        
    const app=new Vue({
         el:'#app',           
         data:{              
             message:'你好!!!',
             isShow: true
         }
    })
</script>

（2）v-else

<h2 v-if="isShow">
    {{message}}
</h2>
<h1 v-else>
   false
</h1>

（3）v-else-if

computed: {
  result(){
       let showMessage = '';
       if (this.score >=90){
           showMessage = '优秀'
       }else if (this.score >= 60){
           showMessage = '及格'
       }else{
           showMessage = '不及格'
       }
        return showMessage
   }
}

v-show 和 v-if 的区别

v-show 和 v-if 用法相似,v-show 当条件为 false 时，仅仅是将元素的 display 属性设置为 none；v-for 当条件为 false 时，不会存在在 dom 中。（当需要在显示与隐藏之间切片很频繁时，使用 v-show，一次切换用 v-if）。

v-model

（1）双向绑定 radio 表单

<label for="male">
     <input type="radio" id="male" value="男" v-model="sex">男
</label>

（2）checkbox 单选框/多选框

<label for="agree">// isAgree单选框
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
 </label>
<label for="agree">// checkbox多选框
      <input type="checkbox" value="足球">足球
      <input type="checkbox" value="篮球">篮球
</label>

（3）select 下拉单选和多选

//单选
 <select name="abc" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
 </select>
 //多选
 <select name="abc" v-model="fruit" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
 </select>

（4）input 值绑定

<input type="checkbox" :value="item" :id="item" v-model="hobbies">

修饰符

（1）.lazy 让数据失去焦点或回车时才更新

<input type="text" v-model.lazy="message">

（2）.number 可以让输入框的内容自动转成数字类型

（3）.trim 过滤内容左右两边的空格

葛媛

HFun 前端攻城狮