Vue基础语法与指令
项目初始化
用vscode打开终端，输入npm init -y生成package.json
然后安装vue
npm install vue
需要注意的是，我遇到了这个问题
出现原因：文件夹名和生成的package.json中的name属性值相同，更改package.json的name属性，然后重新执行npm install vue成功生成vue项目。
- 创建Vue实例，关联页面的模板，将自己的数据绑定到模板上，响应式的
- 指令用来简化对DOM的操作
- 声明方法用于做复杂的操作，methods用来封装这些方法
<div id="app">
<!-- 单向绑定 -->
<h1>Hello，{{name}},I'm {{num}} age</h1>
<!-- 双向绑定，num先绑定vue中data的num,num改变，视图跟着改变，输入框中的值改变，num也改变 -->
<input type="text" v-model="num">
<button v-on:click="num++">点赞</button>
<button v-on:click="cancel">取消</button>
</div>
<script>
// 声明vue对象
let app = new Vue({
el: "#app",// 绑定元素
data: {//封装数据
name: "张三",
num: 20
},
methods: {//封装方法
cancel() {
if (this.num > 0) {
this.num--;
}else{
alert("亲~，取消完毕，不能再取消了！")
}
}
},
});
</script>
插值表达式
格式：{{表达式}}
说明：
- 表达式支持JS语法，可以调用JS的内置函数，但是要求必须有返回值。例如{{1+1}}可以，{{hello()}}hello是一个由返回值的函数。
- 可以直接获取Vue的实例中定义的数据或者函数。
插值闪烁
使用{{}}的方式在网速较慢的时候会出现问题，在数据未加载完毕的时候，页面会显示出原始的{{}}，加载完毕后才显示正确的数据，这种现象被叫做插值闪烁。
v-text与v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../node_modules/vue/dist/vue.js"></script>
<title>Vue</title>
</head>
<body>
<!-- 插值表达式{{}} -->
<div id="app">
{{msg}} {{sayHello()}} {{1+1}}<br>
<!-- v-html会解析HTML内容 -->
<span v-html="msg"></span><br>
<span v-text="msg"></span><br>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: "<h1>HaWei</h1>"
},
methods: {
sayHello() {
return "Hello Wrold";
}
}
})
</script>
</html>
v-bind
v-bind用来绑定标签的属性值，可以绑定超链接的href，img的src等，v-bind可以简写为:。
<!-- v-bind绑定标签的属性值，例如绑定style/class的属性值 -->
<div id="app">
<a v-bind:href="link">百度一下</a>
<h3 v-bind:class="{active:isActive,'text-danger':hashEror}" v-bind:style="{color:color1,fontSize:fontsize}">试一试</h3>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
link: "http://www.baidu.com",
color1:"blue",
fontsize:"30px",
isActive:true,
hasError:true,
}
})
</script>
v-model
v-model用来进行双向绑定，当页面改变的时候，定义的data也会改变。
<div id="app">
会用的编程语言：<br>
<input type="checkbox" v-model="language" value="Java">Java <br>
<input type="checkbox" v-model="language" value="Python">Python <br>
<input type="checkbox" v-model="language" value="PHP">PHP <br>
<input type="checkbox" v-model="language" value="C">C <br>
选中的结果：{{language.join(",")}}
<!-- 数组.join(" ")表示将数组以空格分隔 -->
</div>
<script>
// 声明vue对象
let app = new Vue({
el: "#app",// 绑定元素
data: {//封装数据
language: []
},
methods: {//封装方法
},
});
</script>
v-on
v-on用来绑定事件，基本用法就是绑定一个点击功能，进行点赞，v-on可以简写成@click；
<button v-on:click="num++">点赞</button>
<button v-on:click="cancel">取消</button>
<script>
// 声明vue对象
let app = new Vue({
el: "#app",// 绑定元素
data: {//封装数据
name: "张三",
num: 20
},
methods: {//封装方法
cancel() {
if (this.num > 0) {
this.num--;
}else{
alert("亲~，取消完毕，不能再取消了！")
}
}
},
});
</script>
事件修饰符
在时间处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法上轻松实现这些功能，但是方法只是纯粹的数据逻辑而不是处理DOm事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。事件修饰符由点开头的指令后缀来表示。
.stop：阻止事件冒泡到父类元素
这个该如何理解呢？
别怕，举个例子你就懂了。
在一个HTML中有如下代码，vue.js已经导入。
<div id="app">
<!-- 事件修饰符，事件.stop表示阻止事件冒泡，事件.prevent:表示阻止dom的默认行为，例如阻止超链接生效，事件.once代表事件只生效一次 -->
<div id="lgapp" style="border:1px solid red;padding: 20px;" v-on:click="hello">
大div
<div id="smapp" style="border:1px solid black;padding: 20px;" @click="hello">
小div
<a href="http://www.baidu.com">去百度</a>
</div>
</div>
</div>
<script>
// 声明vue对象
let app = new Vue({
el: "#app",// 绑定小div
data: {//封装数据
},
methods: {//封装方法
hello() {
alert("hello ");
}
},
});
</script>
当去点击小div的时候会调用两次hello方法，因为对于小div来说，父类元素大div也绑定了相同的方法，这种现象叫做事件冒泡，我们本想只用子元素绑定的事件但是父元素事件也执行了，那该如何处理。
解决方法就是使用.stop指令作用在子元素上阻止冒泡到父类元素。
<div id="smapp" style="border:1px solid black;padding: 20px;" @click.stop="hello">
小div
<a href="http://www.baidu.com">去百度</a>
</div>
这次点击就只调用了一次hello方法。
但是当我们点击去百度那个超链接的时候，因为超链接在小div中，所以先调用hello方法，弹一次hello，再转到百度的首页，如果想要阻止超链接在弹窗后跳转到百度的首页，可以使用.prevent指令阻止这种默认行为。
<a href="http://www.baidu.com" @click.prevent="">去百度</a>
还有想要event只执行一次，可以使用.once指令。
按键修饰符
当键盘按下某个键的时候绑定的事件。
想要记住所有的键码很困难，所以vue默认提供了建码的别名。
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space(空格键)
- .up
- .down
- .left
- .right
定义输入框每次按上箭头count+2，按下箭头count-1
<input type="text" v-model="count" @keyup.up="count=count+2" @keyup.down="count--">
v-for
如果学过jstl，jsp，或者模板引擎的话，这个语法很相似。用来遍历集合或者数组。
遍历students数组
<div id="app">
<ul>
<li v-for="(item, index) in students" :key="index">
<!-- 遍历对象有三种写法
1、v-for="item in items "
2、v-for="(item, index) in students" index是索引
3、v-for="(v,k, index) in students" :key="index" v是对象，k是键
-->
下标：{{index}} ==> 名字：{{item.name}} ===》 年龄：{{item.age}}
</li>
</ul>
<!-- 遍历的时候加上:key=“index”用来增加渲染效率，:key用来区分不同的数据 -->
<ul v-for="(v,k, index) in students" :key="index">
k-v=>{{k}}:{{v}}
</ul>
</div>
<script>
// 声明vue对象
let app = new Vue({
el: "#app",// div
data: {//封装数据
count: 0,
students: [
{ id: 1, name: "程咬金", age: 19 },
{ id: 2, name: "东方朔", age: 22 },
{ id: 3, name: "镜", age: 32 },
{ id: 4, name: "狂贴", age: 45 },
{ id: 5, name: "吕布", age: 24 },
],
},
});
</script>
渲染结果
v-if与v-show
两个指令都表示当判断结果是true的时候才显示元素。
但是两者处理的方式有所不同。
举个例子看一下
<div id="app">
<button @click="flag=!flag">改变显示状态</button>
<h1 v-if="flag">看到了！v-if</h1>
<h1 v-show="flag">看到了！v-show</h1>
</div>
<script>
// 声明vue对象
let app = new Vue({
el: "#app",// 绑定小div
data: {//封装数据
flag:true,
},
methods: {//封装方法
},
});
</script>
当我点击按钮改变状态的时候，检察元素可以看到。
所以show是将元素的display设置成none;而v-if是直接将元素注释掉。
相比于v-show，v-if更适合用于逻辑处理，常常和v-for搭配使用，比如遍历students数组时，只显示年龄大于20岁的。
<li v-for="(item, index) in students" :key="index" v-if="item.age>=20">
本人初学，菜鸟一个，以上有理解不到位的敬请指出！
Vue基础语法与指令的更多相关文章
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- 一、vue基础语法（轻松入门vue）
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- Vue基础之内部指令（下）
v-on绑定事件监听器 直接撸代码: <div id="app"> <h2>计数器</h2> number:{{number}} <but ...
- Vue基础语法(二)
class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 style绑定 v-bind:style=" ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
随机推荐
- 从 0 开始的min_max容斥证明
二项式反演 \[f_n=\sum\limits_{i=0}^nC^i_ng_i \Leftrightarrow g_n=\sum\limits_{i=0}^n{(-1)}^{n-i}f_i \] 证明 ...
- P7077 函数调用
我好蠢啊... 考试的时候不会写,现在看了这么多篇题解还是似懂非懂,所以决定写一下草稿... 草稿 和 题解 就是首先,题目保证了函数不会间接的调用其本身,所以可以直接知道这是一个 \(\text{D ...
- 题解-SDOI2013 淘金
题面 SDOI2013 淘金 有一个 \(X\).\(Y\) 轴坐标范围为 \(1\sim n\) 的范围的方阵,每个点上有块黄金.一阵风来 \((x,y)\) 上的黄金到了 \((f(x),f(y) ...
- Fabric v2.0中的隐私数据
文章来源于https://hyperledger-fabric.readthedocs.io/en/release-2.0/ 私有数据集在v1.4中提出,一直使用的是隐私数据集方式,即建立一个隐私数据 ...
- selenium.common.exceptions.WebDriverException: Message: 'chromedriver'解决
相信很多第一次学习selenium的同学们也对这个异常不陌生了,但具体该如何解决这个bug呢? 主要的原因还是因为selenium模拟的客户端对浏览器的操作,但相应浏览器的驱动版本不匹配导致的. 为了 ...
- Mysql常用函数合集
1. 字符函数 length(获取字节数,UTF-8编码中 一个汉字占3个字节,GBK编码中一个汉字占2个字节) select length('abc'); #结果:3 select length(' ...
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
- python中函数的初览
资料参考来源:https://www.cnblogs.com/haifeima/p/9595449.html 现在听到函数这两个字时还会头疼一会,因为我想到的是数学中的函数,但python中的函数不会 ...
- C#随机生成不重复邀请码&创建登录Token&转换人民币大小金额
/// <summary> /// 创建登陆Token /// </summary> /// <param name="length">< ...
- BF,BM,KMP，就这？
为保证代码严谨性,文中所有代码均在 leetcode 刷题网站 AC ,大家可以放心食用. 皇上生辰之际,举国同庆,袁记菜馆作为天下第一饭店,所以被选为这次庆典的菜品供应方,这次庆典对于袁记菜馆是一项 ...