【Vue】Vue学习笔记——基础语法

文章目录

  • 1. Vue基础语法
    • 1.1 模板语法
      • 1.1.1 插值
      • 1.1.2 指令
      • 1.1.3 过滤器
    • 1.2 实例及选项
      • 1.2.1 数据选项
      • 1.2.2 属性选项
      • 1.2.3 方法选项
      • 1.2.4 计算属性
      • 1.2.5 表单控件
      • 1.2.6 生命周期
    • 1.3 模板渲染
      • 1.3.1 条件渲染
      • 1.3.2 列表渲染
    • 1.4 事件绑定
      • 1.4.1 基本用法
      • 1.4.2 修饰符
    • 1.5 基础demo案例


# Vue

引入vue.js(这里是文件夹里有vue.js)

<script src="vue.js" type="text/javascript" charset="utf-8">script>

也可以使用cdn的方式引入,将src中改为相应链接即可。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">

div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            
        }
    })
script>
body>
html>

1. Vue基础语法

1.1 模板语法

1.1.1 插值

  • 文本插值

    在实例中定义的data的属性message,使用{{message}}进行文本插值。

    使用v-once指令插值使插值内容显示后不再修改。

  • HTML插值

    使用v-html指令将数据解释成html代码。

    <p>Using v-html directive: <span v-html="rawHtml">span>p>
    rawHtml:'<span style="color:red">this should be redspan>'
    

    上述将rawHtml属性值作为html元素插入span标签的子节点中。

  • 属性插值

    使用v-bind绑定属性

    <button v-bind:disabled="isButtonDisabled" >Buttonbutton>
    

    使用v-bind动态绑定属性class和style

    <div v-bind:class="cor">test...div>
    cor:'blue'
    <style type="text/css"> 
    .red{
        color: red;
    }
    .blue{
        color:blue;
        font-size: 100px;
    }
    style>
    
  • 插值中使用javascrip表达式

    <p>{{number+1}}p>
    <p>{{ ok ? 'YES' : 'NO' }}p>
    <p>{{ message.split('').reverse().join('') }}p> 
    

1.1.2 指令

指令就是带有v-前缀的特殊属性。指令属性的值预期是单一JavaScript表达式(出来v-for)。指令的职责是当其表达式的值改变的时候相应地将某些行为应用到DOM上。

  • 参数

    <a v-bind:href="url">...a>
    

    这里href是参数,告知v-bind指令将该元素的href属性与表达式url的值绑定。

  • 动态参数

    <a v-bind:[attributename]="url">...a>
    

    这里的attributename会作为一个JavaScript表达式进行动态求值,求得的值作为最终的参数来使用。如果其值为href,等价于v-bind:href。

  • 修饰符

    修饰符是以半角句号“.”指明的特殊后缀,用于指出一个指令应该以特殊方式进行绑定。

    <form v-on:submit.prevent="Onsubmit">...form>
    

    .prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()。

1.1.3 过滤器

  • 定义过滤器

    • 全局过滤器

      Vue.filter('过滤器名称',function(value1[,value2,...]){
      //逻辑代码
      })
      
    • 局部过滤器

      new Vue({
          filters:{
              '过滤器名称':function(value1[,value2,...]){
              //逻辑代码
              }
          }
      })
      
  • 过滤器使用的地方

    Vue.js允许自定义过滤器,可用于一些常见的文本格式化。过滤器可以用在两种地方:双花括号插值和v-bind表达式。过滤器应该被贴在JavaScript表达式尾部,由“管道”符号指示,格式代码如下:

    
    <div>{{数据属性名称|过滤器名称}}div>
    <div>{{数据属性名称|过滤器名称(参数值)}}div>
    
    <div v-bind:id="数据属性名称|过滤器名称">div>
    <div v-bind:id="数据属性名称|过滤器名称(参数值)">div>
    
  • 实例

    局部过滤器实例(在价格前面加上人民币符号’¥’)

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <script src="vue.js" type="text/javascript" charset="utf-8">script>
    head>
    <body>
    <div id="app">
        <p>计算机价格:{{price|addPriceIcon}}p>
    div>
    
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                price:200
            },
            filters:{
                //处理函数
                addPriceIcon(value){
                    console.log(value)//200
                    return '¥'+value;
                }
            }
        })
    script>
    body>
    html>
    
    

传递多个参数的过滤器实例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
    <span>{{value1|multiple(value2,value3)}}span>
div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'hello',
            value1:10,
            value2:20,
            value3:30
        },
        filters:{
            //处理函数
            'multiple':function(value1,value2,value3){
                return value1*value2*value3
            }
        }
    })
script>
body>
html>

全局过滤器

  DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <script src="vue.js" type="text/javascript" charset="utf-8">script>
  head>
  <body>
  <div id="app">
      <h3>{{msg|addNamePrefix}}h3>
  div>
  
  <script>
      Vue.filter("addNamePrefix",(value)=>{
          return 'my name is '+value
      })
      var vm=new Vue({
          el:"#app",
          data:{
              msg:'hello'
          }
      })
  script>
  body>
  html>

1.2 实例及选项

vue通过构造函数来实例化一个Vue对象:var vm=new Vue({}).在实例化时,我们会传入一些选项对象,包含数据选项、属性选项、方法选项、生命周期钩子等常用选项。

1.2.1 数据选项

data是vue实例的数据对象。vue实例创建之后,在控制台输入vm.$data即可访问原始数据对象。

以_或 $ 开头的属性不会被Vue实例代理,因为它们可能与Vue内置的属性或方法冲突。可以使用“vm.$data. _ property”的方式访问这些属性。

1.2.2 属性选项

Vue为组件开发提供了属性(props)选项。可以使用它为组件注册动态属性,来处理业务之间的差异性,使代码可以在相似的应用场景复用。

props选项可以是数组或者对象类型,用于接收从父组件传递过来的参数,并允许为其赋默认值、类型检查和规则校验等。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
    <message content='hello world'>message>
div>

<script type="text/javascript">
    var Message=Vue.extend({
        props:['content'],
        data:function(){
            return{
                a:'it worked'
        }},
        template:'

{{content}}{{a}}

'
}) Vue.component('message',Message) var vm=new Vue({ el:"#app", })
script> body> html>

1.2.3 方法选项

可以通过选项属性methos对象来定义方法,并且使用v-on指令来监听DOM事件。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
    <button v-on:click="test">点我button>
div>

<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            
        },
        methods:{
            test:function(){
                console.log(new Date().toLocaleTimeString());
            }
        }
    })
script>
body>
html>

1.2.4 计算属性

在项目开发中,我们展示的数据往往需要处理。Vue提供了计算属性方法,计算属性是当其依赖属性的值发生变化时,这个属性的值会自动更新。

在{{}}中进行一些计算再展示数据。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
    <table border="1">
    <thead>
        <th>学科th>
        <th>分数th>
    thead>
    <tbody>
        <tr>
            <td>数学td>
            <td><input type="text" v-model="Math">td>
        tr>
        <tr>
            <td>语文td>
            <td><input type="text" v-model="Chinese">td>
        tr>
        <tr>
            <td>英语td>
            <td><input type="text" v-model="English">td>
        tr>
        <tr>
            <td>总分td>
            <td>{{Math+Chinese+English}}td>
        tr>
        <tr>
            <td>平均分td>
            <td>{{(Math+Chinese+English)/3}}td>
        tr>
    tbody>
    table>
div>

<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            Math:95,
            Chinese:96,
            English:90
        }
    })
script>
body>
html>

通过{{}}运算解决问题代码结构不清晰。Vue提供了更好的解决方案——计算属性。computed通常计算相关的函数返回最后计算出来的值。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
    <table border="1">
    <thead>
        <th>学科th>
        <th>分数th>
    thead>
    <tbody>
        <tr>
            <td>数学td>
            <td><input type="text" v-model="Math">td>
        tr>
        <tr>
            <td>语文td>
            <td><input type="text" v-model="Chinese">td>
        tr>
        <tr>
            <td>英语td>
            <td><input type="text" v-model="English">td>
        tr>
        <tr>
            <td>总分td>
            <td>{{sum}}td>
        tr>
        <tr>
            <td>平均分td>
            <td>{{avg}}td>
        tr>
    tbody>
    table>
div>

<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            Math:95,
            Chinese:96,
            English:90
        },
        computed:{
            sum:function(){
                //this指向vm实例
                return this.Math+this.Chinese+this.English;
            },
            avg:function(){
                return this.sum/3;
            }
        }
    })
script>
body>
html>

上述实例只提供了getter读取值的方法,除getter外还可以设置计算数学的setter。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>

<script type="text/javascript">
    var vm=new Vue({
        data:{
            a:1
        },
        computed:{
            aDouble:function(){
                return this.a*2;
            },
            aPlus:{
                get:function(){
                    return this.a+1;
                },
                set:function(v){
                    this.a=v-1;
                }
            }
        }
    })
    console.log(vm.aPlus);//2
    vm.aPlus=5;
    console.log(vm.a);//4
    console.log(vm.aDouble);//8
script>
body>
html>

1.2.5 表单控件

  1. 基础用法

    可以使用v-model指令在表单< input >、< testarea >、及< select >元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。v-model本质上是语法糖,负责监听用户的输入事件以便更新数据,并对一些极端场景做一些特殊处理。

    • 单行文本可在input元素中使用v-model实现双向数据绑定,代码如下:

      <input v-model="message" placeholder="请输入信息......">
      <p>Message is:{{message}}p>
      
    • 多行文本可在testarea元素中使用v-model实现双向数据绑定,代码如下:

      <span>Multiline message is:span>
      <p style="white-space: pre;">{{message}}p>
      <br>
      <textarea v-model="message" placeholder="add multiple lines">textarea>
      

      注:在文本区域插值(< textarea >< /textarea >)并不会生效,应用v-model代替。

    • 单个复选框,绑定到布尔值,代码如下:

      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{checked}}label>
      
    • 多个复选框绑定到同一数组,代码如下:

      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jacklabel>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="jack">Johnlabel>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="jack">Mikelabel>
      <br>
      <span>Checkednames:{{checkedNames}}span>
      
      var vm=new Vue({
              el:"#app",
              data:{
                  checkedNames:[]
              }
          })
      
  • 单选按钮的双向数据绑定,代码如下:

    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runooblabel>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Googlelabel>
    <br>
    <span>选中值为:{{picked}}span>
    
  • 选择列表,下拉列表的双向数据绑定。

    单选时:

    <select v-model="selected">
        <option disabled value="">请选择option>
        <option>Aoption>
        <option>Boption>
        <option>Coption>
    select>
    <span>选中值为:{{selected}}span>
    

    如果v-model表达式的初始值未能匹配任何选项,则< select >元素将被渲染为“未选中”状态。

    多选列表:

    <select v-model="selected" multiple style="width: 50px;">
        <option>Aoption>
        <option>Boption>
        <option>Coption>
    select>
    <br>
    <span>选中值为:{{selected}}span>
    

    动态选项,用v-for渲染。

    <select v-model="selected" >
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        option>
    select>
    <br>
    <span>选中值为:{{selected}}span>
    
     data:{
                selected:'A',
                options:[
                    {text:'one',value:'A'},
                    {text:'TWO',value:'B'},
                    {text:'THREE',value:'C'},
    
                ]
            }
    
  1. 绑定value

    对于单选按钮、勾选框及选择列表选项,v-model绑定的value通常是静态字符串。

    
    <input type="radio" v-model="picked" value="a">
    
    <input type="checkbox" v-model="toggle">
    
    <select v-model="selected">
        <option value="abc">ABCoption>
    select>
    

    实现复选框功能。有时我们想绑定value到Vue实例的一个动态属性上,这时可以用v-bind实现,并且这个属性可以不是字符串。

    <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
    {{toggle}}
    
    data:{
                toggle:'',
                a:'ac',
                b:'bd'
            }
    
    //当选中时输出字符串ac,当没有选中时输出字符串bd
    

    单选按钮

    <input type="radio" v-model="toggle" v-bind:value="a">
    data:{
                toggle:'',
                a:'ac'
            }
    //选中时在页面控制台输入vm.toggle和vm.a的值相等。
    

    选列表设置

    <select v-model="selected">
        
        <option v-bind:value="{number:123}">123option>
    select>
    data:{
                selected:''
            }
            
    //当选中时在页面控制台输入typepf vm.selected输出’object‘,如果输入vm.selected.number则输出123
    
  2. 修饰符

    • .lazy

      在默认情况下,v-model每次在input事件触发后将输入框的值和数据进行同步。此时可以添加.lazy修饰符,从而转为在change事件之后进行同步。

      
      <input v-model.lazy="msg">
      {{msg}}
      
    • .number

      如果想自动将用户的输入值转为数值类型,可以给v-model添加.number修饰符。

      <input v-model.number="age" type="number">
      

      通常这很有用,因为即使在“type=number”时,HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析,则会返回原始的值。

    • .trim

      如果要自动过滤用户输入的首尾空白字符,可以给v-model添加.trim修饰符。

      <input v-model.trim="msg">
      
      

1.2.6 生命周期

Vue的整个生命周期中有许多钩子函数,这就给了用户在不同阶段添加自己代码的机会。

  • beforeCreate:在实例初始化之后,数据观测和event/watcher事件配置之前被调用。
  • Created:实例已经创建完成之后被调用。在这一步,实例已完成下列配置:数据监测、属性和方法的运算以及watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
  • beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。
  • Mounted:el被新创建的vm.$el替换,并挂载到实例上调用该钩子。
  • beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。可以在这个钩子中进一步更改状态,这不会触发附加的重新渲染过程。
  • Updated:由于数据更新导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以现在可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不会被调用。
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • Destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会被解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不会被调用。

1.3 模板渲染

在我们获取后台数据之后,会按照一定的规则加载到前端写好的模板中,并显示在浏览器中,这个过程称为渲染。

1.3.1 条件渲染

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

v-if、v-else-if、v-else这三个指令后面跟的是表达式。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件。


<p v-if="status==1">当status为1时,显示该行p>
<p v-else-if="status==2">当status为2时,显示该行p>
<p v-else-if="status==3">当status为3时,显示该行p>
<p v-else>否则显示该行p>

我们需要注意多个v-if、v-else-if、v-else之间需要紧挨着,如果在它们之间插入一行新代码,编译器会报错。

v-show和v-if效果等同。

二者之间的区别:

  • 控制显示的方法不同:v-show实际通过修改DOM元素的display属性来实现节点的显示和隐藏,而v-if通过添加/删除DOM节点来实现。
  • 编译条件:v-if是惰性的,如果初始条件为假,则什么都不做,此时不会去渲染该元素,只有在条件第一次变为真时才开始局部编译;v-show则不管初始条件是什么,都被编译然后被缓存,而且将DOM元素保留,只是简单地基于CSS进行切换,即v-if条件为true时才会被加载渲染,为false时不加载。v-show不管是true还是false都会被加载渲染。
  • 性能消耗:v-if有更高的切换消耗,v-show有更高的初始渲染消耗。
  • 使用场景:如果需要非常频繁的切换,则使用v-show为好。如果在运行时条件很少改变,只需要一次显示或隐藏,则使用v-if较好。

key

Vue会尽可能的渲染元素,通常会复用已有元素而不是从头开始渲染。

<p v-if="ok">
<label>Usernamelabel>
<input placeholder="Enter your username">
p>
<p v-else>
<label>Emaillabel>
<input placeholder="Enter your email address">
p>
<button @click="ok=!ok">切换button>

页面中输入信息后单击“切换”按钮,此时文本框里的没有清空。

Vue提供了一种方式来声明“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的key属性。

<p v-if="ok">
<label>Usernamelabel>
<input placeholder="Enter your username" key="username-input">
p>
<p v-else>
<label>Emaillabel>
<input placeholder="Enter your email address" key="email-input">
p>
<button @click="ok=!ok">切换button>

1.3.2 列表渲染

  • v-for循环用于数组。定义一个数组类型的数据items,用v-for将
  • 标签循环渲染。
<ul id="app">
    <li v-for="item in items">
        {{item.name}}
    li>
ul>

data:{
            items:[
                {name:'beixi'},
                {name:'jzj'}
            ]
        }

还支持一个可选的第二个参数为当前的索引,索引从0开始。分隔符in前的语句使用括号,第二项就是items当前项的索引。可以用of代替in作为分隔符。

<li v-for="(item,index) in items">
        {{index}}------{{item.name}}
    li>
  • v-for用于对象

    v-for通过一个对象的属性来遍历输出结果。

    <ul id="app">
        <li v-for="value of Object">
            {{value}}
        li>
    ul>
    
    data:{
                Object:{
                    name:'luccy',
                    gender:'男',
                    age:30
                }
            }
    

    遍历属性时有两个可选参数,分别是键名和索引。

    <li v-for="(value,key,index) of Object">
            {{index}}------{{key}}: {{value}}
        li>
    
  • v-for用于整数

    <li v-for="n in 10">
            {{n}}
        li>
    

1.4 事件绑定

Vue提供了v-on指令监听DOM事件,在事件绑定上,类似原生JavaScript的onclick事件写法,也是在html上进行监听。

1.4.1 基本用法

语法规则:

v-on:事件名.修饰符=方法名()|方法名|简单的JS表法式
简写:@事件名.修饰符=方法名()|方法名|简单的JS表法式
  • 直接使用

    直接在标签中书写js方法

    单击次数{{count}}
    <button @click="count++">单击+1button>
    
  • 调用methods方法

    通过v-on绑定实例选项属性methods中的方法作为事件的处理器。

    <button @click="say">单击button>
    
            data:{
                msg:"say hello"
            },
            methods:{
                say:function(){
                    alert(this.msg)
                }
            }
    

    单击button按钮,即可触发say函数,弹出alert框‘say hello’.

    • 方法传参,方法在直接调用时在方法内传入参数。

      <button @click="say('你好')">单击button>
      
              methods:{
                  say:function(val){
                      alert(val)
                  }
              }
      
  • 传入事件对象

    <button data-id="123" @click="say($event)">单击button>
    
            methods:{
                say:function(e){
                    console.log(e);
                    //e.srcElement,DOM结点
                    e.srcElement.style.background='red';
                    console.log(e.srcElement.dataset.aid);//获取自定义属性的值
                }
            }
    

1.4.2 修饰符

Vue为指令v-on提供了多个修饰符,方便我们处理一些DOM事件的细节,Vue主要的修饰符如下:

  • .top:阻止事件继续传播,即阻止它的捕获和冒泡过程

    @click.stop='handle()'//只要在事件后面加上.stop就可以阻止事件冒泡。
    
    <div style="background-color: aqua;width: 100px;height: 100px;" v-on:click="outer">
            外部单击
            <div style="background-color: red;width: 50px;height: 50px;" v-on:click.stop="inner">
                内部单击
            div>
        div>
        
                methods:{
                outer:function(){
                    console.log("外部单击");
                },
                inner:function(){
                    console.log("内部单击");
                }
            }
    

    点击“内部单击”按钮阻止了冒泡过程,即只执行了inner这个方法,如果不加.stop则先执行inner方法然后执行outer方法,即通过了冒泡这个过程。

  • .prevent:阻止默认事件

    @click.prevent='handle()'//只要在事件后面加上.prevent就可以阻止默认事件
    

    如下阻止了a标签的默认刷新:

    <a href='' v-on:click.prevent>单击a>
    
  • .capture:添加事件监听器时使用事件捕获模式,即在捕获模式下触发

    @click.capture='handle()'
    

    如在下列实例中,单击最里层的“单击6”时,outer方法会先执行,因为outer方法在捕获模式下执行,先于冒泡事件。按下列顺序执行:outer→set→inner,因为后两个还是冒泡模式下触发的事件。

    <div v-on:click.capture="outer">
        外部单击5
        <div v-on:click="inner">
            内部单击5
            <div v-on:click="set">
                单击6
            div>
        div>
    div>
    
  • .self:当前元素自身是触发处理函数时才会触发函数

    原理是根据event.target确定是否为当前元素本身,以此来决定是否触发事件/函数。

    如下实例,如果单击“内部单击”按钮,冒泡不会执行outer方法,因为event.target指的是内部单击的DOM元素,而不是外部单击的,所以不会触发自己的单击事件。

    <div v-on:click.self="outer">
        外部单击
        <div v-on:click="inner">
            内部单击
        div>
    div>
    
  • .once:只触发一次

    <div v-on:click.once="outer">
            单击once
        div>
    
  • 键盘事件

    • 方式一

      @keydown=‘show($event)’

      <input type="text" @keydown='show($event)'/>
      
              methods:{
                  show:function(ev){
                      console.log(ev.keyCode);
                      if(ev.keyCode==13){
                          alert('你按了回车键')
                      }
                  }
              }
      
    • 方式二

          <input type="text" @keyup.enter="show()">
          <input type="text" @keydown.up="show()">
          <input type="text" @keydown.down="show()">
          <input type="text" @keydown.left="show()">
          <input type="text" @keydown.right="show()">
      

1.5 基础demo案例

使用npm下载bookstrap文件:npm install bootstrap@3

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="vue.js" type="text/javascript" charset="utf-8">script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>图书管理系统h2>
        div>
        <div class="panel-body form-inline">
            <label for="">id:<input type="text" class="form-control" v-model="id">label>
            <label for="">图书名称:<input type="text" class="form-control" v-model="name">label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
        div>
    div>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>idth>
                <th>图书名称th>
                <th>添加时间th>
                <th>操作th>
            tr>
        thead>
        <tbody>
            <tr v-for="item in arr":key="item.id">
                <td v-text="item.id">td>
                <td v-text="item.name">td>
                <td v-text="item.time">td>
                <td><a href="" @click.prevent="del(item.id)">删除a>td>
            tr>
        tbody>
    table>
div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            arr:[
                {'id':1,'name':'三国演义','time':new Date()},
                {'id':2,'name':'红楼梦','time':new Date()},
                {'id':3,'name':'水浒传','time':new Date()},
                {'id':4,'name':'西游记','time':new Date()},
            ],//创建一些初始数据和格式
            id:'',
            name:''
        },
        methods:{
            add(){
                this.arr.push({'id':this.id,'name':this.name,'time':new Date()});
                this.id=this.name='';
            },
            del(id){
                var index=this.arr.findIndex(item=>{
                    if(this.id==id){
                        return true;
                    }
                })
                //findIndex方法查找索引,实现列表的删除功能
                this.arr.splice(index,1)
            }
        }
    })
script>
body>
html>

效果如图:

【Vue】Vue学习笔记——基础语法_第1张图片

你可能感兴趣的:(vue.js,javascript,前端)