vue入门基础

最新推荐文章于 2024-11-15 18:38:47 发布

MAAAOHAN

最新推荐文章于 2024-11-15 18:38:47 发布

阅读量277

点赞数

分类专栏： vue 文章标签： vue java javascript js html

本文链接：https://blog.csdn.net/MAAAOHAN/article/details/106168539

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE入门基础

一丶什么是vue

A丶vue的基本概念

Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架。
与其他大型框架相比，Vue被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue可以开发一个全新项目，也可以将Vue引入到一个现有的项目中。

B丶vue的优势

轻量级：Vue简单、直接，使用友好。
数据绑定：数据驱动视图，视图也可以驱动数据。
指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
插件：插件用于对Vue框架功能进行扩展。

二丶vue的引用

下载 Vue Devtools，直接用<script>标签引用，Vue 会被注册为一个全局变量。
联网使用，CDN引用。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

NPM安装（详情请看官网）

三丶vue实例

1.创建一个vue实例，在页面输出hello word：

<div id="app>
    	<p>{{message}}</p>
    	<button @click="showHello"></button>
</div>

///
var vm=new Vue({
el:"#app",     //el:元素，管理的元素
       data:{   //存储数据
message:"hello word"
}，
       methods：{     //methods:自定义方法，this指向的是vue本身
            showHello(){
                console.log(this.message)    
}
}
})

  简单的计数器效果：

<div id="app>
    	<p>{{message}}</p>
    	<button @click="showHello"></button>
</div>

///
var vm=new Vue({
el:"#app",     //el:元素，管理的元素
       data:{  
message:0
}，
       methods：{     //methods:自定义方法，this指向的是vue本身
            showHello(){
                this.message++；
}
}
})

三丶vue语法

①vue的插值操作

v-html：将元素当成HTML标签解析后输出

<div id="app">  
   <h2>{{url}}</h2>
   <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://www.baidu.com">百度一下</a>'   
         }  
  })
</script>

v-text：将元素当成纯文本输出

/会把文本覆盖掉
<div id="app">  
   <h2>{{message}}mack</h2>  //你好啊mack
   <h2 v-text="message">make</h2>   //你好啊  
</div>
<script src="../js/vue.js"></script><script>  
   const app = new Vue({    
   el: '#app',    
   data: {      
       message: '你好啊',      
         }  
  })
</script>

v-clock能够解决插值表达式闪烁的问题`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none
        }
    </style>
</head>
<body>
   <div id="itany">
    <p v-cloak>{{msg}}</p>
   </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#itany",
            data:{
                msg:"hellovue"
            },
            beforeMount:function(){
                alert("确定执行")
            }
        })
    </script>
</body>
</html>

v-pre 原样输出

<div id="app" v-pre>
    {{message}}
</div>
var vm = new Vue({
    el : '#app',
    data : {
        message : 'hello world'
    }
})

v-once：只渲染一次

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

②按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

.enter 回车
.tab换行键
.delete删除
.esc 退出
.space 空格
.up上
.down下
.left左
.right右

③计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。watch

计算属性是vue实例中的一个配置选项：computed通常里面都是一个个计算相关的函数，返回最后计算出来的值。即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

<div id="demo">{{ fullName }}</div>
<script src="../js/vue.js"></script> 
<script>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }，
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
</script>

④过滤器：filters

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<div id="app">{{message|fun}}</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>    
let vm=new Vue({        
   el:"#app",        
   data:{            
       message:"hellowoRld"        
        },        
   filters:{//过滤器           
          fun:function(v){               
            <!--把单词首字母改成大写，其他字母为小写-->               
            let first= v.charAt(0).toUpperCase(); //处理首字母          
            let last= v.slice(1).toLowerCase(); //截取除首字母之外的字母       
            return first+last;           
                     }      
             }    
       });
</script>

⑤指令：指令是带有v-前缀的特殊属性：

v-if 条件判断：
1.条件判断语句：v-if指令
2. else语句：v-else指令
3.else-if语句：v-else-if指令
4. 展示判断：v-show指令

<div id="app"> 
   <h2 v-if="score>=90">优秀</h2>
   <h2 v-else-if="score>=80">良好</h2> 
   <h2 v-else-if="score>=60">及格</h2>
   <h2 v-else>不及格</h2>
   <h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script><script> 
   const app = new Vue({    
      el: '#app',   
      data: {      
           score: 99 
      },  
      computed: {      
           result() {       
              let showMessage = '';      
              if (this.score >= 90) {         
                  showMessage = '优秀'
               } 
              else if (this.score >= 80) {          
                  showMessage = '良好' 
             }
             }   
     })
</script>

v-gor 循环语句：
v-for指令，如：v-for=item in list、v-for=(value,key,index) in object、v-for=“n in 10”、v-for=“n in [1,23]”

1.v-for遍历对象

<div id="app">  
<!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->  
<ul>    
   <li v-for="item in info">{{item}}</li>  
</ul>

<!--2.获取key和value 格式: (value, key) --> 
<ul>    
   <li v-for="(value, key) in info">{{value}}-{{key}}</li> 
</ul>

<!--3.获取key和value和index 格式: (value, key, index) -->  
<ul>    
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>  
</ul>
</div>
<script src="../js/vue.js"></script> 
<script>  
     const app = new Vue({   
     el: '#app',    
     data: {      
         info: { name: 'why',age: 18,height: 1.88}  
           }  
})
   </script>

2.v-for遍历数组

<div id="app">  
<!--1.在遍历的过程中,没有使用索引值(下标值)--> 
  <ul>    
     <li v-for="item in names">{{item}}</li>  
  </ul>
  <!--2.在遍历的过程中, 获取索引值-->  
  <ul>    
     <li v-for="(item, index) in names">{{index+1}}.{{item}}</li> 
  </ul>
</div>
<script src="../js/vue.js"></script><script>  
  const app = new Vue({   
     el: '#app',
     data: { 
            names: ['why', 'kobe', 'james', 'curry']    
            }  
        })
 </script>

⑥样式绑定

html的class和syle属性都是用来设置元素的样式，vue中采用v-bind:class、v-bind:style进行绑定，并且进行了增强，表达式结果可以为string 、array、object;如：

1.v-bind基本使用

<div id="app">  
<!-- 错误的做法: 这里不可以使用mustache语法-->  
<!--<img src="{{imgURL}}" alt="">-->  
<!-- 正确的做法: 使用v-bind指令 -->  
   <img v-bind:src="imgURL" alt="">  
   <a v-bind:href="aHref">百度一下</a>  
<!--<h2>{{}}</h2>-->
<!--语法糖的写法--> 
   <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://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp', aHref: 'http://www.baidu.com'    
           }  
   })
</script>

2.类样式：class

<div id="app">  
<!--<h2 class="active">{{message}}</h2>-->  
<!--<h2 :class="active">{{message}}</h2>-->
<!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>--> 
<!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->  
    <h2 class="title"  v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> 
    <h2 class="title" v-bind:class="getClasses()">{{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     
               },      
         getClasses: function () { 
            return {active: this.isActive, line: this.isLine}     
                }    
           } 
 })
</script>

3.内联样式：style

<div id="app">  
<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--'50px'必须加上单引号, 否则是当做一个变量去解析-->  
<!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
<!--finalSize当成一个变量使用-->  
<!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->  
    <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>  
    <h2 :style="getStyles()">{{message}}</h2></div>
<script src="../js/vue.js"></script><script> 
const app = new Vue({     
    el: '#app',    
    data: {      
        message: '你好啊',      
        finalSize: 100,      
        finalColor: 'red',    
         },     
    methods: {      
        getStyles: function () {        
             return {
                fontSize: this.finalSize + 'px', backgroundColor: this.finalColor
                   }      
               }    
           }  
      })
</script>

⑦事件修饰符：

.stop //阻止事件冒泡

<!-- 1.阻止事件冒泡 -->
<a v-on:click.stop="callFn"></a>

.capture //事件捕获

<!-- 3. 添加事件监听器是使用事件捕获模式 -->
<div v-on:click.capture="callFn"></div>

.self //只能自身触发

<!-- 4. 只在事件元素本身触发时触发回调（阻止事件冒泡、捕获） -->
<div v-on:click.slef="callFn"></div>

.once //只能触发一次

<!-- 5. 事件只能点击一次 v2.1.4版本 -->
<a v-on:click.once="callFn"></a>

.pevent //阻止事件的默认行为

<!-- 2.提交事件不重载页面 -->
<form v-on:submmit.prevent="onSubmmit"></form>

⑧vue表单

vue 使用v-model指令在表单空间元素上创建双向数据绑定，此时v-model会根据空控件类型自动选择正确的方法来更新元素；如：

<input v-model="name">
<span>{{name}}</span>

⑨vue事件监听

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})