vue基础语法。 vue基础语法

时间 2019-12-14

标签 vue 基础语法繁體版

原文原文链接

vue基础语法

1、Vue简介html

Vue.js 是一个用于建立 Web 交互界面的库。它让你经过简单而灵活的 API 建立由数据驱动的 UI 组件。前端

Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一个Vue的实例，而这个实例又做用域页面上的某个HTML元素。vue

其核心在于经过数据驱动界面的更新和展现而非JS中经过操做DOM来改变页面的显示。html5

2、Vue快速入门
进入文件夹，按住shift,右键打开cmd窗口，下载vue.js.
npm install vuejava

咱们经过new Vue()构建了一个Vue的实例。ios

在实例化 Vue 时，须要传入一个选项对象，它能够包含数据、模板、挂载元素、方法、生命周期钩子等选项。好比：挂载元素（el）和数据（data），咱们能够操纵数据改变视图。web

　　el表示Vue要操做哪个元素下面的区域，好比：#app则表示操做id为app的元素下面的区域；数据库

data表示Vue实例的数据对象，data的属性可以响应数据的变化；每一个 Vue 实例都会代理其 data 对象里全部的属性。express

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1.建立Vue的案例
    let vm = new Vue({
        el:'#app',
        data:{ //vue中的model -> 数据
            message:'你好，世界！'
        }
    })
</script>
</html>

运行结果：npm

2.2 Vue中双向数据绑定

MVVM模式其自身是实现了数据的双向绑定的，在Vue.js中咱们能够经过指令v-model来实现数据双向绑定。

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{ //vue中的model -> 数据
            message:'你好，世界！'
        }
    })
</script>
</html>

运行结果：

pycharm识别VUE 设置：以下图

模板设置：

英文版：

2.3调用模板：

Vue的经常使用指令

Vue.js提供了很多经常使用的内置指令，接下来咱们快速搞定它们，这对咱们接下来的开发帮助很大。主要有：

v-once指令

v-if指令

v-show指令

v-else指令

v-for指令

v-on指令

v-bind指令

v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>v-once:是不会改变的</h3>
        <p v-once>原始值：{{msg}}</p>
        <p>后面的：{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'你好，世界！'
            }
        });
    </script>
</body>
</html>

运行结果： v-model 动态传值给msg 变量了。加上v-once，变量的值不会改变！！！

v-if ：能够接收一个表达式. 不知足条件能够注释（没有该标签）

条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果能够是true或false，也能够是返回true或false的表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-Vue的经常使用指令-v-if</title>
</head>
<body>
    <div id="app">
        <p v-if="show">要显示出来！</p>
        <p v-if="hide">不要显示出来！</p>
        <!--v-if能够接收一个表达式.不知足条件能够注释。-->
        <p v-if="height > 1.55">小明身高:{{height}}m</p>
        <p v-if="height1 > 1.55">小明身高:{{height1}}m</p>
    </div>
<script src="js/vue.js"></script>
<script>
    //经过数据操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            //v-if能够接收一个表达式.
            height:1.68,
            height1:1.50,
        }
    });
</script>
</body>
</html>

运行结果：　

扩展：

扩展

v-show : v-show是根据表达式之真假值，切换元素的 display CSS 属性

也是条件渲染指令，不一样的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不一样点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-Vue的经常使用指令-v-show</title>
</head>
<body>
    <div id="app">
        <p v-show="show">要显示出来！</p>
        <p v-show="hide">不要显示出来！</p>
        <!--v-show能够接收一个表达式.不知足条件则不显示。至关于display:none-->
        <p v-show="height > 1.55">小明身高:{{height}}m</p>
        <p v-show="height1 > 1.55">小明身高:{{height1}}m</p>
    </div>
<script src="js/vue.js"></script>
<script>
    //经过数据操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            //v-show能够接收一个表达式.
            height:1.68,
            height1:1.50,
        }
    });
</script>
</body>
</html>

运行结果： v-show 不符合至关于 display:none;

v-show和v-if的区别：

v-if 是真实的条件渲染，由于它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件；

　　v-show 则只是简单地基于 CSS 切换。

　 v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。所以，若是须要频繁切换使用 v-show 较好，若是在运行时条件不大可能改变则使用 v-if 较好。

v-else 二选一注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

能够用v-else指令为v-if或v-show添加一个“else块”。

代码以下：v-if和v-else结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06vue-v-else命令</title>
</head>
<body>
    <div id="app">
        <!--v-else:是不能单独使用的。前面必须加上v-if/v-show.而且必须黏在一块儿，不然会报错。-->
        <p v-if="height > 1.70">小明身高:{{height}}m</p>
        <p v-else>小明身高不足1.70m</p>
    </div>
<script src="js/vue.js"></script>
<script>
    //经过数据操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            //v-else.
            height:1.88,
        }
    });
</script>
</body>
</html>

v-else-if 多选一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07Vue的经常使用指令v-else-if</title>
</head>
<body>
    <div id="app">
        <!--v-else-if-->
        <p>输入的成绩对于的等级是：</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 80">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
<script src="js/vue.js"></script>
<script>
    //经过数据操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            //v-else-if.
            score:50  //优秀 良好 及格 不及格
        }
    });
</script>
</body>
</html>

View Code

v-for 基于数据渲染一个列表，相似于JS中的遍历。其数据类型能够是 Array | Object | number | string。

该指令之值，必须使用特定的语法(item, index) in items, 为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其余指令

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-Vue的经常使用指令v-for</title>
</head>
<body>
    <div id="app">
        <p v-for="(score, index) in scores">
            {{index + ':' + score}}
        </p>
        <hr>
        <p v-for="d in dog">
            {{d}}
        </p>
        <hr>
        <p v-for="str in name">
            {{str}}
        </p>
        <hr>
        <p v-for="n in phone">
            {{n}}
        </p>
    </div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            scores:[100,87,88,80],
            dog:{name:'旺财',age:6,height:1.2},
            name:'er',
            phone:'123',
        }
    });
</script>
</body>
</html>

View Code　

v-for练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            width:600px;
            border:2px solid orangered;
            text-align:center;
        }
        thead{
            background:orangered;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="p in persons">
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                </tr>    
            </tbody>
        </table>
    </div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            persons:[
                {name:'张三',age:18,sex:'男'},
                {name:'李四',age:20,sex:'男'},
                {name:'王五',age:23,sex:'女'},
                {name:'赵6',age:30,sex:'男'}
            ]
        }
    });
</script>
</body>
</html>

View Code

v-text：标签里的内容都不会渲染。 v-html：字符串标签。标签里的内容都不会渲染。

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}hahaha</p>
        <!-- v-text：标签里的内容都不会渲染 -->
        <p v-text="msg">呵呵呵呵</p>
 
        <hr>
        <!-- 字符串标签。 标签里的内容都不会渲染-->
        <div v-html="html">
            哈哈哈哈
            <input type="text">
        </div>
    </div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'今每天气真好！',
            html:'<input type="date"><input type="color">'
        }
    });
</script>
</body>
</html>

View Code

运行结果：

v-bind 简写方式:冒号动态绑定属性、样式、类动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-bind指令能够在其名称后面带一个参数，中间用一个冒号隔开。这个参数一般是HTML元素的特性（attribute），好比：

v-bind:src="imageSrc" 能够缩写： :src="imgaeSrc"

:class="{ red: isRed }" 或 :class="[classA, classB]" ...

:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...

绑定一个有属性的对象，好比：v-bind="{ id: someProp, 'other-attr': otherProp }"

...

语法结构：v-bind:argument="expression"

由于 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优点在于能够应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

案例实操：让HTML5学院在各大学院中处于选中状态

运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.class</title>
    <style>
        .active{
            background-color:orangered;
            font-size:20px;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-for="(college,index) in colleges" :class="index === activeIndex ? 'active' : ''">
            {{college}}
        </p>
        <p style="color:red">今天的天气很好！</p>
        <p :style="{color:fontColor}">今天的天气很好！</p>
    </div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            colleges:[
                'ios学院',
                'java学院',
                'html5学院',
                'ui学院',
                've学院'
            ],
            activeIndex:0,
            fontColor:'green',
        }
    });
</script>
</body>
</html>

View Code

v-on 简写方式:@ 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其做用和v-bind相似。注意：若是用在普通元素上时，只能监听原生 DOM 事件；可是若是用在自定义元素组件上时，也能够监听子组件触发的自定义事件。

经常使用的修饰符包括：

.stop - 调用 event.stopPropagation()；中止冒泡。



.prevent - 调用 event.preventDefault(); 中止监听原生事件。



.capture - 添加事件侦听器时使用 capture 模式。



.self - 只当事件是从侦听器绑定的元素自己触发时才触发回调。



.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素自己触发时才触发回调。



.once - 触发一次。

使用手法：

<button v-on:click="doThis"></button>



<button v-on:click="doThat('hello', $event)"></button>



<button @click="doThis"></button>



<button @click.stop="doThis"></button>



<button @click.prevent="doThis"></button>



<form @submit.prevent></form>



<button @click.stop.prevent="doThis"></button>



<input @keyup.enter="onEnter">



<input @keyup.13="onEnter">



<button v-on:click.once="doThis"></button>

绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- v-vind:简写冒号。绑定:属性、样式、类 -->
        <p :style="{color:fontColor}">{{msg}}</p>
        <button v-on:click="msg='娃哈哈'">改变内容</button>
        <!-- v-on:简写@ -->
        <button @click="changeContent()">改变内容1</button>
        <button @click="changeContentColor()">改变字体颜色</button>
    </div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'今天的天气很好！',
            fontColor:'red'
        },
        methods:{  // 实例因此函数实现
            // 钩子函数
            changeContent(){
                // alert(0);
                this.msg='测试改掉没有！';
            },
            changeContentColor(){
                this.fontColor = 'green';
            }
        }
    });
</script>
</body>
</html>

View Code

综合练习：增删小例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#app{
margin:50px auto;
width:600px;
}
fieldset{
border:1px solid orangered;
margin-bottom: 20px;
}
fieldset input{
width:200px;
height:30px;
margin:10px 0;
}
table{
width:600px;
border:2px solid orangered;
text-align:center;
}
thead{
background:orangered;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一部分 -->
<fieldset>
<legend>贝贝学生录入系统</legend>
<div>
<span>姓名:</span>
<input type="text" placeholder="请输入姓名" v-model="newStudent.name">
</div>
<div>
<span>年龄:</span>
<input type="text" placeholder="请输入年龄" v-model="newStudent.age">
</div>
<div>
<span>性别:</span>
<select v-model="newStudent.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>手机号:</span>
<input type="text" placeholder="请输入手机号" v-model="newStudent.phone">
</div>
<!-- v-on @ -->
<button @click="createNewStudent()">建立新用户</button>
</fieldset>
 
<!-- 第二部分 -->
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>手机号</td>
<td>操做</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td>{{p.phone}}</td>
<td>
<button @click="deleteStudentMsg(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
persons:[
{name:'张三',age:18,sex:'男',phone:'12345'},
{name:'李四',age:20,sex:'男',phone:'12345'},
{name:'王五',age:23,sex:'女',phone:'12345'},
{name:'赵6',age:30,sex:'男',phone:'12345'}
],
newStudent:{name:'',age:0,sex:'男',phone:''},
},
methods:{
// 建立一条新记录
createNewStudent(){
// 姓名不能为空
if(this.newStudent.name === ''){
alert('姓名不能为空！');
return;
}
// 年龄不能小于0
if(this.newStudent.age <= 0){
alert('请输入正确的年龄！');
return;
}
// 手机号不能为空
if(this.newStudent.phone === ''){
alert('手机号不能为空！');
return;
}
// 往数据库添加一条新元素
this.persons.unshift(this.newStudent);
// 清空数据
this.newStudent = {name:'',age:0,sex:'男',phone:''};
},
// 删除一条学生记录
deleteStudentMsg(index){
this.persons.splice(index,1)
}
}
});
</script>
</body>
</html>

View Code

运行结果：

计算属性（computed properties）

1、原由？

虽然在模板中绑定表达式是很是便利的，可是它们实际上只用于简单的操做。在模板中放入太多的逻辑会让模板太重且难以维护。好比：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

这样，模板再也不简单和清晰。在实现反向显示 message 以前，你应该经过一个函数确认它。因此，Vue.js提供了计算属性来让咱们去处理实例中的复杂逻辑。

　　计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。

案例以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>初始值:{{name}}</p>
<!-- 表达式要产生结果便可 -->
<p>翻转值:{{name.split('').reverse().join('')}}</p>
<p>函数调用:{{revecrStr()}}</p>
<!-- 直接调用计算属性，就会直接调用get方法。 -->
<p>计算属性:{{reverse}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'Rosc jack'
},
methods:{
revecrStr(){ //函数
return this.name.split('').reverse().join('');
},
},
//计算选项
computed:{
// get方法 计算属性
// 直接调用计算属性，就会直接调用get方法。
reverse(){
return (this.name.split('').reverse().join(''));
}
}
})
</script>
</body>
</html>

View Code

运行结果：

计算属性被设计出来的目的在于：getter 是干净无反作用的。

2、计算属性和 Methods的区别？

当页面从新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面从新渲染的时候（页面元素的data变化，页面就会从新渲染），都会从新调用method。

若是不但愿有缓存，咱们能够用method取代computed。

疑惑：为何须要缓存？

假设咱们有一个重要的计算属性 A ，这个计算属性须要一个巨大的数组遍历和作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存，咱们将不可避免的屡次执行 A 的 getter ！

3、计算属性的setter方法

计算属性默认只有 getter ，不过在须要时你也能够提供一个 setter ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<p>{{fullName}}</p>
<!-- v-on @ -->
<button @click="deal()">调用计算属性的setter方法</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'sanfeng'
},
methods:{
deal(){
// 调用计算属性的setter方法
this.fullName = '娃 哈哈';
}
},
computed:{
/*//get
fullName(){
return this.firstName + ' ' + this.lastName
}*/
fullName:{
// get方法
get:function(){
return this.firstName + ' ' + this.lastName;
},
// set方法 至关于传值。
set:function(str){
// alert(0)
let nameArr = str.split(' ');
this.firstName = nameArr[0];
this.lastName = nameArr[1];
}
}
}
})
</script>
</body>
</html>

View Code

双花括号{{运算、变量}}

01.index.hmlt

main.js

内存的数据能够更改

v-model 双休数据绑定

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="name">
        <span v-show="name">你的名字是:{{name}}</span>
    </div>
    <div>
        <input type="text" v-model="age">
        <span v-show="age">你的年龄是:{{age}}</span>
    </div>
    <div>
        <input type="text" v-model="sex">
        <span v-show="sex">你的年龄是:{{sex}}</span>
    </div>
</div>
</body>
<script src="js/main.js"></script>
</html>

index.html

var app = new Vue({
    el:"#app",
    data:{
        name:null,
        age:null,
        sex:null
    }
});

main.js

v-show：显示或者隐藏

main.js

index.html

语法

v-for：循环

main.js

index.html

运行结果

main.js 数据结构通常是嵌套的

index.html

每一个对象的属性能够点出来

双花括号里的东西是能够进行运算的。

如计算打折后的价格。其中葱不打折

出现了NaN怎么解决呢？？？

三元运算符

判断是否有打折，有则显示打折后的价格，没有则显示原价格。

数据能够动态加

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="food in foodList">{{food.name}}: ￥{{food.discount ? food.price * food.discount : food.price}}</li>
    </ul>
</div>
</body>
<script src="js/02.main.js"></script>
</html>

v-for

var app = new Vue({
    el:"#app",
    data:{
        // foodList:['姜','蒜','葱'],
        foodList:[
            {
                name:'姜',
                price:5,
                discount:.8,
            },
            {
                name:'蒜',
                price:9,
                discount:.5,
            },
            {
                name:'葱',
                price:2,
            }
        ],
    }
});

main.js

v-bind:绑定数据和元素属性简写为':'冒号

默认跳转到百度，也能够动态修改跳转到淘宝页面。

绑定class名，方式1：

绑定class名，方式2：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="bli/vue.js"></script>
    <style>
        .active{
            background:#a10;
            color:#fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- <a href="http://baidu.com">点我</a> -->
    <!-- <a v-bind:class="klass"  v-bind:href="url">点我</a> -->
    <a v-bind:class="{active: isActive}"  v-bind:href="url">点我</a>
</div>
</body>
<script src="js/03.main.js"></script>
</html>

v-bind

v-on:绑定事件, 简写为'@'

给一个元素绑定1个事件：

给一个元素绑定多个事件：

注意：绑定的方法必定要有，不然会报错。

表单提交事件

点击提交事件后（post/get请求），会自动刷新页面，控制台打印的东西就看不见了（闪了一下）。

阻止默认行为

方法1：e.preventDefault(); （必须传参）

提交事件后，不会自动刷新页面了。（e.preventDefault(); 阻止了默认行为）

方法2：.prevent (不用传参)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">点我</button>
    <hr>
    <!-- 阻止默认行为方法1：传参 -->
    <!-- <form v-on:submit="onSubmit($event)">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
    <!-- 阻止默认行为方法2：不传参 -->
    <form v-on:submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
</div>
</body>
<script src="js/04.main.js"></script>
</html>

v-on阻止默认行为

中止冒泡事件 .stop

键盘抬起事件 keyup

若是用户输入的是回车，应该怎么判断呢？？？

键盘按钮是回车键时 .enter

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">点我</button>
    <hr>
    <!-- 阻止默认行为方法1：传参 -->
    <!-- <form v-on:submit="onSubmit($event)">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
    <!-- 阻止默认行为方法2：不传参 -->
    <!-- <form v-on:submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
 
    <!-- 中止冒泡 -->
    <!-- <form v-on:submit.stop="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
    
    <!-- 键盘抬起事件 -->
    <!-- <form v-on:keyup="onKeyup" v-on:submit.stop="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
 
    <!-- 当键盘按的是回车键 -->
    <form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
 
</div>
</body>
<script src="js/04.main.js"></script>
</html>

View Code

v-model 双向数据绑定

3个修饰符

.lazy 当失去焦点时，才会触发更新内容。

.trim 将先后空格都去掉。

普通的v-model，多个空格无效，最多只有1个空格。

若是想让它显示全部的空格怎么办呢？？？

用户输入的内容，前面有空格应该去掉。

聚焦时：前面的空格不显示。

失去焦点时：自动去掉前面的空格。

.number 输入的内容是数字类型。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- <input type="text" v-model="name">
    <br>
    <pre>{{name}}</pre> -->
 
    <!-- 失去焦点，更新内容。 .lazy-->
    <!-- <input type="text" v-model.lazy="name">
    <br>
    {{name}} -->
 
    <!-- .trim 将先后空格都去掉 -->
    <!-- <input type="text" v-model.trim="name">
    <br>
    <pre>{{name}}</pre> -->
 
    <!-- .number 输入的内容是数字类型。  -->
    <input type="text" v-model.number="price">
    <br>
    <pre>{{price}}</pre>
 
</div>
</body>
<script src="js/05.main.js"></script>
</html>

v-model指令及修饰符

v-model在其余元素及类型上的用法

单选框：

注意：name必须同样，才会单选。

单选框设置默认值：

注意：name属性能够不写。用v-model来代替。

多选框：

多选框设置默认值：

多行输入框：设置默认值

和input（text类型）是同样的效果。

下拉框：

默认显示第一个选项

下拉框：设置默认值为空

下拉框：设置默认值为指定value值（单选）

下拉框：设置默认值为指定value值（多选multiple）

注意：按住Ctrl键能够选中多个值。Shift能够连选选中多个值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 单选框 -->
    <!-- <label>
        男
        <input name="sex" value="male" type="radio">
    </label>
    <label>
        女
        <input name="sex" value="female" type="radio">
    </label> -->
    
    <!-- 单选框设置默认值 -->
    <!-- <label>
        男
        <input v-model="sex" value="male" type="radio">
    </label>
    <label>
        女
        <input v-model="sex" value="female" type="radio">
    </label>
    <br>
    {{sex}} -->
    
    <!-- 多选框 -->
    <!-- <label>
        男
        <input v-model="sex" value="male" type="checkbox">
    </label>
    <label>
        女
        <input v-model="sex" value="female" type="checkbox">
    </label>
    <br>
    {{sex}} -->
    
    <!-- 多行输入框 -->
    <!-- <textarea v-model="texcon"></textarea>
    <br>
    {{texcon}} -->
 
    <!-- 下拉框 单选 -->
    <div>你来自哪里？</div>
    <select v-model="from">
        <option value="1">星球</option>
        <option value="2">火球</option>
    </select>
    <br>
    {{from}}
    <hr>
 
    <!-- 下拉框 多选-->
    <div>你要去哪里？</div>
    <select v-model="dest" multiple>
        <option value="1">星球</option>
        <option value="2">火球</option>
    </select>
    <br>
    {{dest}}
</div>
</body>
<script src="js/06.main.js"></script>
</html>

v-model在其余元素的用法

v-if 控制流指令

v-if / v-else

v-if / v-else-if / v-else

判断条件也能够的多个条件组成

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if控制流指令</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role == 'admin' || role == 'vip'">
        管理员你好
    </div>
    <div v-else-if="role == 'hr'">
        hr你好
    </div>
    <div v-else>
        你没有权限访问次页面
    </div>
</div>
</body>
<script src="js/07.main.js"></script>
</html>

流程控制指令

计算属性

1.将分数渲染出来

2.将分数放input中，能够改变值。

3.计算出总分

4.计算出平均分

5.将平均分四舍五入一下

以上的计算过程能够存到计算属性中，运行效果同样。

当删除一个值的时，会拼接字符串，而不是计算值，该怎么办呢？？？

方式1：将input宽加上数字类型便可计算。（推荐使用）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="bli/vue.js"></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.number="math"></td>
            </tr>
            <tr>
                <td>物理</td>
                <td><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model.number="english"></td>
            </tr>
            <tr>
                <td>总分</td>
                <!-- <td>{{math + physics + english}}</td> -->
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <!-- <td>{{Math.round((math + physics + english) / 3)}}</td> -->
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<script src="js/08.main.js"></script>
</html>

计算器

vue基础语法。 vue基础语法

vue基础语法

Vue的经常使用指令

v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新。

v-if ： 能够接收一个表达式. 不知足条件能够注释（没有该标签）

v-show : v-show是根据表达式之真假值，切换元素的 display CSS 属性

v-else 二选一 注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

v-else-if 多选一

v-for 基于数据渲染一个列表，相似于JS中的遍历。其数据类型能够是 Array | Object | number | string。

v-text：标签里的内容都不会渲染。 v-html：字符串标签。 标签里的内容都不会渲染。

v-bind 简写方式:冒号 动态绑定属性、样式、类 动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on 简写方式:@ 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其做用和v-bind相似。注意：若是用在普通元素上时，只能监听 原生 DOM 事件；可是若是用在自定义元素组件上时，也能够监听子组件触发的自定义事件。

计算属性（computed properties）

双花括号{{运算、变量}}

语法

v-for：循环

三元运算符

v-bind:绑定数据和元素属性 简写为':'冒号

v-on:绑定事件, 简写为'@'

给一个元素绑定1个事件：

给一个元素绑定多个事件：

表单提交事件

阻止默认行为

方法1：e.preventDefault(); （必须传参）

方法2：.prevent (不用传参)

中止冒泡事件 .stop

键盘抬起事件 keyup

键盘按钮是回车键时 .enter

v-model 双向数据绑定

3个修饰符

.lazy 当失去焦点时，才会触发更新内容。

.trim 将先后空格都去掉。

.number 输入的内容是数字类型。

v-model在其余元素及类型上的用法

单选框：

单选框设置默认值：

多选框：

多选框设置默认值：

多行输入框：设置默认值

下拉框：

下拉框：设置默认值为空

下拉框：设置默认值为指定value值（单选）

下拉框：设置默认值为指定value值（多选multiple）

v-if 控制流指令

v-if / v-else

v-if / v-else-if / v-else

计算属性

v-if ：能够接收一个表达式. 不知足条件能够注释（没有该标签）

v-else 二选一注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

v-text：标签里的内容都不会渲染。 v-html：字符串标签。标签里的内容都不会渲染。

v-bind 简写方式:冒号动态绑定属性、样式、类动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on 简写方式:@ 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其做用和v-bind相似。注意：若是用在普通元素上时，只能监听原生 DOM 事件；可是若是用在自定义元素组件上时，也能够监听子组件触发的自定义事件。

v-bind:绑定数据和元素属性简写为':'冒号