一、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 ...
随机推荐
- 洛谷 题解 P1225 【黑白棋游戏】
看见很多dalao写了什么双向BFS,蒟蒻表示不会写啊. 怎么办办? 先来分析一下题目,一眼看去就是一个搜索题,考虑DFS与BFS. 先放一份DFS的代码: #include<bits/stdc ...
- java读写cookie中文乱码解决方法
1.写入的时候: public boolean addCookie( HttpServletRequest req, HttpServletResponse resp){ //创建 Cookie co ...
- 用css美化select框
先上代码: .selectData{ height: 0.42rem; position: absolute; right:.28rem; top:.30rem; //去边框 border: none ...
- 部门innercode刷新
最近遇到一个小需求,就是刷新部门的innercode.在导入数据的时候,innercode乱了,所以需要刷新.那先说说innercode是什么吧. 大家都知道部门是一个树形结构,但是有时候想知道一个部 ...
- Django之Hook函数
Django之钩子Hook方法 局部钩子: 在Fom类中定义 clean_字段名() 方法,就能够实现对特定字段进行校验.(校验函数正常必须返回当前字段值) def clean_name(self): ...
- 20191011-构建我们公司自己的自动化接口测试框架-Action的request方法封装
Action模块 封装接口request方法,根据传入的参数调用不同的请求方法,因为项目特色,我们公司的接口都是get和post方法,所以仅仅封装了get和post方法: import request ...
- vue-cookies的使用
安装vue-cookies npm install vue-cookies --save 使用vue-cookies // 在main.js中 // require var Vue = require ...
- Jenkins 2017年用过
Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins功能包括: 1.持续的软件版本 ...
- ZROI17普及23-A.如烟题解--技巧枚举
题目链接 因版权原因不予提供 分析 别看这是普及模拟赛,其实基本上是提高难度...像这题做NOIpT1的话也说的过去 有个很显然的暴力思路就是枚举c,a,b,时间复杂度\(O(N^3)\), 然后正解 ...
- MYSQL编码转换的问题latin1转utf8
1.先导出 mysqldump --default-character-set=latin1 --create-options=false --set-charset=false -u root - ...