vue是一套用于构建用户界面的渐进式框架

开始vue

安装（cdn方式）

通过script引入vue后会声明一个全局的vue对象

开发版（适合调试）
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
压缩版（体积更小）
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

hello vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>开始vue</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="div1">
            {{message}} / {{name}}
        </div>
        <script>
            var app = new Vue({
                el: '#div1',
                data: {
                    message: "hello world",
                    name: "跆拳道"
                }
            })
        </script>
    </body>
</html>

监听事件

script引入vue文件

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

书写div

<div id="div1">
    <div>一共点击了 {{clickNumber}} 次</div>
    <button v-on:click="count">click me</button>
    <button @click="count">@替换v-on 缩写</button>
</div>

书写vue对象

<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            clickNumber:0
        },
        methods:{
            count: function(){
                this.clickNumber++;
            }
        }
    })
</script>

实现

传递参数：v-on:click="count(1)" 在基础三的vue实现crud有详细使用

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

<div id="div1">
    <div>一共点击了 {{clickNumber}} 次</div>
    <button v-on:click="count">click me</button>
    <button @click="count">@替换v-on 缩写</button>
</div>    
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            clickNumber:0
        },
        methods:{
            count: function(){
                this.clickNumber++;
            }
        }
    })
</script>

事件修饰符

.stop
.prevent
.capture
.self
.once

冒泡事件

父元素里有子元素，如果点击了子元素, 那么click 事件不仅会发生在子元素上，
也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。

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

<div id="div1">
    <div id="grandFather" @click="grandFather">
        grandFather
        <div id="father" @click="father">
            father
            <div id="me" @click="me">
                me
                <div id="son" @click="son">
                    son
                </div>
            </div>
        </div>
    </div>
</div>

<script>
var vm = new Vue({
    el: '#div1',
    data: {
        clickNumber:0
    },
    methods:{
        count: function(){
            this.clickNumber++;
        },
        grandFather: function(){
            alert("grandFather");
        },
        father: function(){
            alert("father");
        },me: function(){
            alert("me");
        },
        son: function(){
            alert("son");
        }
    }
})
</script>

.stop阻止冒泡

<div id="me" @click.stop="me">

.capture优先触发

<div id="me" @click.capture="me">

.self只可自己子元素不能触发

<div id="me" @click.self="me">

.once只能触发一次

<div id="me" @click.stop="me">

.prevent阻止提交(超链接、表单)

通过在 click 后面添加 .prevent 可以阻止页面跳转、表单提交等。

<div id="div1">
    <a href="https://www.12306.cn/index/" @click="jump" >正常的链接 http://12306.com</a>
       
    <a href="https://www.12306.cn/index/" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
    
    <a href="https://www.12306.cn/index/" @click.prevent >纯prevent之后的链接 http://12306.com</a>
    
    <form @submit="jump" action="https://www.12306.cn/index/">
        <button type="submit">正常的form</button>
    </form>
    <form @submit.prevent="jump" action="https://www.12306.cn/index/">
        <button type="submit">prevent jump()之后的form</button>
    </form>
    <form @submit.prevent action="https://www.12306.cn/index/">
        <button type="submit">纯prevent之后的form</button>
    </form>
<div>

<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            clickNumber:0
        },
        methods:{
            jump:function(){
                alert("jump()函数被调用");
            }
        }
    })
</script>

条件语句

if

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <button v-on:click="toggle">切换隐藏显示</button>
    <div v-if="show">默认显示时看的见的</div>
</div>
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            show: true
        },
        methods:{
            toggle: function(){
                this.show = !this.show;
            }
        }
    })
</script>

else

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    
    <button v-on:click="moyiba">点击彩票中奖</button>
    <div v-if="!show">中了500万</div>
    <div v-else>谢谢惠顾</div>
    
</div>
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            show: true
        },
        methods:{
            moyiba: function(){
                this.show=Math.random()>0.1;
            }
        }
    })
</script>

if-else

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <button v-on:click="zhiye">选择职业</button>
    <div v-if="number > 80">程序员</div>
    <div v-else-if="number > 40">公务员</div>
    <div v-else-if="number > 10">工程师</div>
</div>
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            number: 0
        },
        methods:{
            zhiye: function(){
                this.number=Math.random()*100
            }
        }
    })
</script>

循环v-for

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <tr>
            <td>name</td>
            <td>score</td>
            <td>下标</td>
        </tr>
        <tr v-for="team,index in list">
            <td>={{team.name}}</td>
            <td>{{team.score}}</td>
            <td>{{index}}</td>
        </tr>
        
        <!--纯数字遍历-->
        <!--<div v-for="i in 10">
         {{ i }}
        </div>-->
    </table>
</div>
<script>
    //1.准备数据
    var data = [ 
                {name:"ig",score:100},
                {name:"fpx",score:100},
                {name:"rng",score:90}
                ]
    //2.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            list: data
        }
    })
</script>

属性绑定v-bind

从vue的data中取出数据绑定给页面上的超链接、图片地址等

<div id="div1">
    <a v-bind:href="page">http://12306.com</a>
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })
    
</script>

v-bind:href, 可以简写成 :href

<div id="div1">
    <a :href="page">http://12306.com</a>
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })
    
</script>

双向绑定v-model

使用v-model

在之前的例子中，我们都是把vue对象的数据显示到视图中，现在要将视图中的数据绑定到vue对象中
此处使用v-model双向绑定

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    hello name: <input type="text" v-model="name"/>
    <button @click="doclick">输出</button>
</div>
<script>
    //1.构建vue
    var vm = new Vue({
        el: '#div1',
        data: {
            name: 'fpx'
        },
        methods:{
            doclick: function(){
                alert(this.name);
            }
        }
    })
</script>

表单数据绑定

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="div1">
    <table align="center" border="1px">
        <th>视图类型/th>
        <th>输入数据</th>
        <th>绑定到vue上的时值</th>
        <tr>
            <td>单行文本</td>
            <td><input v-model="input" /></td>
            <td>{{input}}</td>
        </tr>
        
        <tr>
            <td>多行文本</td>
            <td><textarea v-model="textarea">

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2019/11/19 17:01

Vue基础一