一、vue基础--语法
用到的前台编程工具是Visual Studio Code，暂时是官网下载vue.js到本地使用
一、Visual Studio Code需要安装的插件：
jshint ：js代码规范检查
Beautify ：一键美化代码插件
Vetur: .vue 文件识别插件
Javascript(Es6) code snippets :Es6语法提示
Auto Rename Tag :自动命名标签，标签成对出现
Auto Close Tag: 自动闭合标签
vue helper :一些vue代码的快捷代码插件
vscode-icons:提供不同文件夹的显示区别
按下ctrl+k 在按下ctrl+s 可以查看快捷键
初次体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue.js"></script>
<title>01vue体验</title>
</head>
<body>
<div id="app">
<P>{{username}}</P>
<p>{{greet()}}</p> <button @click="username='李四'">改名字</button> </div>
<script>
new Vue({
el:"#app",
data:{
username:"张三"
},
methods:{
greet(){
return "你好"
}
}
})
</script>
</body>
</html>
二、Vue模板语法
1.v-once加上之后不会改变原来的值
2.v-html读取变量的时候会当做HTML元素来解析
3.v-bind属性绑定，要读取vue.data中的属性，就要使用这个v-bind，也可以省略使用如：<img v-bind:src="logo" alt="">或者<img :src="logo" alt="">
小插曲：设置自己的代码快捷方式：
a.ctrl+shift+p 搜索snippets 点击第一个之后找到html.json打开
b.按照说明操作就可以了----zyb
4.绑定Class
a.通过数组的方式绑定：
<div id='app'>
<p v-bind:class="[pcl1,pcl2]">张三</p>
</div>
<script>
new Vue({
el:'#app',
data:{
pcl1:"title",
pcl2:"main-title",
}
})
</script>
b.通过对象的当时绑定：
<div id='app'>
<p :class="{title:strong1,'main-title':strong2}">哈哈哈</p>
<button @click="strong=true">文字加粗</button>
</div>
<script>
new Vue({
el:'#app',
data:{
strong1:false,
strong2:false
}
})
</script>
5.绑定Style：
a.用对象的方式绑定：
<div id='app'>
<p :style="{backgroundColor:backgroundColor}">我爱你，中国</p>
</div>
<script>
new Vue({
el:'#app',
data:{
backgroundColor:"red"
}
})
</script>
b.通过数组的方式绑定：
<div id='app'>
<p :style="[pStyle1,pStyle2]">我爱你，中国</p>
</div>
<script>
new Vue({
el:'#app',
data:{
backgroundColor:"red",
pStyle1:{
'background-color':"blue",
'font-size':"30px"
},
pStyle2:{
'border-bottom':"20px solid #000"
}
}
})
</script>
6.JavaScript表达式：
在属性绑定和变量读取中，可以使用表达式，常见的表达式有：变量读取，变量运算，三目运算符，函数调用，取反等。代码如下：
<div id='app'>
<div :style="{color:danger?'red':'black'}">三目运算符执行：{{message.split(" ").reverse().join(" ")}}</div>
<!--split分割，reverse翻转，join数据转字符串-->
<div>调用方法的执行结果：{{greet()}}</div>
<div>这个是！取反的：{{!istest}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
//条件？条件成立的值：条件不成立的值---三目运算符
danger:true,
message:"hello word",
istest:true
},
methods:{
greet(){
return "自己定义的函数要放在methods中,"
}
}
})
7.条件判断：有v-if,v-else-if,v-else。如果有多个元素渲染要用template标签，vue默认会重用相同标签，入过不想被重用加上key属性。
a.单个标签显示的：
<div id='app'>
<p v-if="tianqi=='sun'">钓鱼</p>
<p v-else-if="tianqi=='rain'">打游戏</p>
<p v-else>睡觉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
tianqi:"rain"
}
})
</script>
b.多个标签显示的：
<div id='app'>
<template v-if="age<18">
<p>第一个模板</p>
<p>第二个模板</p>
</template>
<template v-else-if="age>=18">
<p>第三个模板</p>
<p>第四个模板</p>
</template>
</div>
<script>
new Vue({
el:'#app',
data:{
age:4
}
})
</script>
8.v-show和v-if的区别：都是判断使用，v-show只有一个，标签不能在template中使用，代码如下：
<div id='app'>
<div v-show="logintype=='username'">
<label for="">用户名：</label>
<input type="text" name="username" placeholder="密码" key="username">
</div>
<div v-show="logintype=='email'">
<label for="">邮箱:</label>
<input type="text" name="email" placeholder="邮箱" key="email">
</div>
<button @click="changeLogintype">切换登录方法</button>
</div>
<script>
new Vue({
el:'#app',
data:{
tianqi:"rain",
age:4,
logintype:"username"
},
methods:{
changeLogintype(){
this.logintype = this.logintype=='username'?"email":"username"
}
}
})
</script>
9.v-for循环：语法 变量 in 循环体
a. 数组循环：<tr v-for="book in books">，如果要循环下标，接个圆括号就OK了，但是位置第一个是对象，第二个才是下标
b. 对象循环：和循环数组是一样的，区别就是循环的时候是value，key，代码如下：
<div id='app'>
<!-- 表格table，表头thead，表格行tr，列th,表单体tbody,下面的index是加的序号，是0开始的，注意的是第一个是对象，第二个是下标，位子是固定的-->
<table>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<!-- <tr v-for="book in books">
<th>{{book.title}}</th>
<th>{{book.author}}</th>
</tr> -->
<tr v-for="(book,index) in books">
<th>{{index+1}}</th>
<th>{{book.title}}</th>
<th>{{book.author}}</th>
</tr>
</tbody>
</table>
<div v-for="(value,key) in users">
{{key}}:{{value}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
'title':'坏蛋是怎样炼成的1',
'author':'六道'
},
{'title':'坏蛋是怎样炼成的2',
'author':'七道'
},
{'title':'坏蛋是怎样炼成的3',
'author':'八道'
}],
users:{
"username":"张三",
"age":"24"
}
}
})
</script>
10.v-for 循环状态保持
默认情况下，数组中的顺序发生变化重新渲染的时候，vue会重新利用之前的元素，不会重新排序，可以添加一个key属性，key只能是数字或者字符串，一般是用循环出来的对象的某个唯一的值。vue2.2以上的vue-for中key是必须的。代码如下:
<div id='app'>
<div v-for="book in books" :key="book.title">
<label>标题</label>
<input type="text" :placeholder="book.title">
</div>
<button @click="changeBookSort">改图书顺序</button>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
'title':'坏蛋是怎样炼成的1',
'author':'六道'
},
{'title':'坏蛋是怎样炼成的2',
'author':'七道'
},
{'title':'坏蛋是怎样炼成的3',
'author':'八道'
}],
users:{
"username":"张三",
"age":"24"
}
},
methods:{
changeBookSort(){
this.books.sort(function(a,b){
return Math.random(0,1)-0.5
})
}
}
})
</script>
11.触发视图更新
a.直接赋值更新 this.heros=[],模板会立即更新，代码如下：
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li> </ul>
<button @click="update">更新</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗'],
user:{"username":"张三"}
},
methods:{
update(){
this.heros = ['三毛流浪记']
}
}
})
</script>
b.通过函数更新 this.heros.push("xx")代码如下：
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<button @click="pushhero">添加一个元素</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗']
},
methods:{
pushhero(){
this.heros.push("三毛流浪记")
}
}
})
</script>
c.函数可以直接视图更新的有：
push()添加元素的方法：this.heros.push("三毛流浪记")
pop()删除数组中最后一个元素：this.heros.pop()
shift()删除数组中第一个元素：this.heros.shift()
unshift(itme):在数组开头位置添加一个元素：this.heros.unshift('西游记')
splice(index,howmany,item1,...,itemN):向数组中添加或删除或者替换元素
向heros第0个位置添加元素 this.heros.splice(1,0,"splice添加"),index:从第几个开始操作，howmany：操作几个元素，item1：操作的参数
下标从0开始删除2个元素 this.heros.splice(0,2)
下标从0开始替换2个元素 this.heros.splice(0,2,"splice替换",'splice替换')
sort(funcion)排序:this.heros.sort(funcion(x,y)){a=Math.random(); return}
reverse()将数组元素进行反转：this.heros.reverse()
d.以上都是可以触发更新的，不能触发更新的有：过滤用的filter,字符串拼接的concat,切片的slice。可以进行操作之后赋值才让他直接更新,代码如下：
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<button @click="concathero">两个数组拼接赋值显示</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗']
},
methods:{
concathero(){
this.heros=this.heros.concat(['张三','李四'])
}
}
})
</script>
e.如果想要在对象上新增一个属性，只能通过Vue.set来实现。想要通过下标修改数组中的值并让立即更新，也只能使用Vue.set来实现，代码如下：
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<div v-for="(value,key) in user">
{{key}}:{{value}}
</div>
<button @click="updateArray">更新数组</button>
<button @click="updateOjject">更新数组</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗'],
user:{"username":"张三"}
},
methods:{
updateArray(){
Vue.set(this.heros,0,'哇哈哈')
},
updateOjject(){
// this.user.username='增拉萨'
Vue.set(this.user,'age',18)
}
}
})
</script>
12.事件绑定
a.可以直接把代码放在元素上
b.可以把代码放在函数中然后在@事件后面写上函数名称
c.常规的写法是v-on,简写是@+事件名
d.可以传递参数，也可以传递$enent这个特殊参数
e.常见的修饰符： a. .stop: event.stopPropagation,阻止事件冒泡
b. .captuer 事件捕获
c. .once 这个事件只执行一次
d. .self 代表当前这个被点击的元素自身
e. .passive 在当前滚动的时候告诉浏览器不会阻止默认行为，可以使滚动流畅
f. .prevent 阻止浏览器跳转
f.代码如下：
<div id='app'>
<ul>
<li v-for="book in books" :key="book" v-on:click="liCilck(book)">
{{book}}
</li>
</ul>
<!-- <a href="https://www.baid.com" @click="gotozto($event)">到大运</a> -->
<a href="https://www.baid.com" @click.prevent="gotozto($event)">到大运</a>
</div>
<script>
new Vue({
el:'#app',
data:{
books:['坏蛋是怎样练成的',"钢铁是怎样练成的"]
},
methods:{
liCilck(value){
console.log(value);
},
gotozto(event){
// event.preventDefault()
//这两个注释代码成对使用
window.location="http://www.kuaiyun.net.cn"
}
}
})
</script>
一、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 基础语法入门（转载）
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
- 2. Vue基础语法
模板语法: Mustache语法: {{}} Html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok?'Yes': ...
- Vue基础语法与指令
项目初始化 用vscode打开终端,输入npm init -y生成package.json 然后安装vue npm install vue 需要注意的是,我遇到了这个问题 出现原因:文件夹名和生成的p ...
随机推荐
- java根据模板生成pdf
原文链接:https://www.cnblogs.com/wangpeng00700/p/8418594.html 在网上看了一些Java生成pdf文件的,写的有点乱,有的不支持写入中文字体,有的不支 ...
- P4568 飞行路线【分层图最短路】
题目链接:https://www.luogu.org/problem/P4568 题目大意:给定n个点,m条无向边,k次机会经过边时代价为 0 .给出起点和终点,求其最短路径. 解题思路: 两种方法, ...
- [bzoj4368][IOI2015]boxes纪念品盒_动态规划_单调队列_贪心
bzoj4368 IOI2015 boxes纪念品盒 题目链接:https://lydsy.com/JudgeOnline/problem.php?id=4368 数据范围:略. 题解: 如果在一个最 ...
- [转帖]18W喂不饱有必要买30W充电器吗？iPhone 11 Pro Max充电评测
18W喂不饱有必要买30W充电器吗?iPhone 11 Pro Max充电评测 https://www.cnbeta.com/articles/tech/895237.htm 改天买一个 设备玩一玩 ...
- springboot用controller跳转html页面
之前SSM框架,里面有webapps文件夹,用来存放前端页面和各种前端资源,现在SpringBoot中没有webapps文件夹,springboot结构如下: 第一.resourses下文件夹publ ...
- 使用 netkeeper 创翼网速慢解决方案(13)
1. 方法1 步骤: 卸载Netkeeper,并删除 卸载以太网(本地连接)驱动 重置网络 重启 重新安装Netkeeper.如果登录出错,卸载「IP,IPv6,Network Monitor」,然后 ...
- VMware安装windows7系统
1.进入VMware系统,选择创建新的虚拟机 2.进入安装页面,选择自定义安装 3.选择虚拟机硬件兼容性,选择与自己软件相匹配的硬件兼容性 4.选择下一步后,选择稍后安装操作系统 5.选择客户机操作系 ...
- 安装jar包到本地仓库
1.控制台安装 安装指定文件到本地仓库命令:mvn install:install-file-DgroupId=<groupId> : 设置项目代码的包名(一般用组织名)-Da ...
- S03_CH10_DMA_4_Video_Stitch视频拼接系统
S03_CH10_DMA_4_Video_Stitch视频拼接系统 10.1概述 注意:本课程和上一课程<S03_CH09_DMA_4_Video_Switch视频切换系统>基本相同,不同 ...
- df执行hang住
一.现象 在linux操作系统中,执行df -h命令,后hang住 二.思路 排查是否存在Nfs问题,无法正常挂载nfs路径导致的问题. 三.解决过程 3.1 cat /etc/rc.local #m ...