Vue语法
第一个Vue示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = 'd1'>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1", // 绑定标签
data:{
name:"qingqiu",
age:17,
}
})
</script>
</html>
每一个vue实例，都需要划分一块地方，给予vue来放置东西。
首先，需要实例化一个vue对象。
el："一般使用标签的id"。
data：{ 放置数据的位置 }
数据和方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "d1">
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
var info = {
name:"qingqiu",
age:17
}; // 可以先创建一个变量包含了信息，然后再将之传入data
var app = new Vue({
el:"#d1",
data:info
})
</script>
</html>
模板语法：
v-html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p>{{msg1}}</p>
<p>{{msg2}}</p> <!-- 若是不加v-html，将会以字符串的形式显示 -->
<p v-html="msg2">{{msg2}}</p> <!--标签属性加上 v-html="msg2(data中的键)"，这样才会渲染标签。-->
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
msg1:"顾清秋",
msg2:"<a href='https://www.baidu.com'>点击跳转</a>",
},
})
</script>
</html>
指令示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p v-if="status">沉默着，走了有，多遥远</p>
<!-- v-if="status" 表示这个标签如果status返回的是true则显示，如果是false则不显示标签-->
<p v-show="status">抬起头，慕然间，才发现</p>
<!--v-show="status" 表示这个标签如果status返回的是true则显示，如果是false则显示标签，不现实标签内的内容，
只是相当于给标签加了个style="diplay:none"的样式-->
<!-- 参数：
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
-->
<p><a v-bind:href="url">点击跳转</a></p>
<!-- v-bind:href="url" 在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 --> <p><button v-on:click="click">点击事件</button></p>
<!-- v-on:click="click" v-on 用于监听事件，紧跟的click是事件名.最后的“click”是被绑定的methods中的方法 --> <form action="" v-on:submit.prevent="submit">
<!-- 监听submit事件，并阻止页面的刷新：submit.prevent -->
<input type="text">
<input type="submit">
</form>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
status:true,
url:"https://www.baidu.com",
},
//methods中是专用来放置方法
methods:{
click:function(){
alert("点击事件")
},
submit:function(){
alert("阻止form的刷新页面")
},
},
})
</script>
</html>
计算属性和侦听器：
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p>{{msg}}</p>
<p>{{msg.split("").reverse().join("")}}</p> <p>{{reversemsg()}}</p>
<!--上面的是方法：方法时每次都会被调用，也就是每次都会重新执行一遍-->
<p>{{reversemsg2}}</p>
<!--上面的是属性：属性只会在更新的时候执行一次，以后除非属性更改，否则就不会再次执行，只会在缓存中拿取值。--> <p>{{quanming}}</p>
<p>{{quanming2}}</p>
<!--动态属性一般放置在computed中--> </div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
msg:"12345",
ming:"清秋",
xing:"顾",
quanming:"顾 清秋"
},
methods:{
reversemsg:function(){
console.log("这是一个方法");
return this.msg.split("").reverse().join("")
},
},
computed:{
//计算属性
reversemsg2:function(){
console.log("这是属性");
return this.msg.split("").reverse().join("")
},
quanming2:function(){
return this.xing + this.ming
},
}, //侦听器：实时会根据属性的更改而执行一些命令
watch:{
//val 就是属性的值。
xing:function(val){
this.quanming = val + this.ming
},
ming:function(val){
this.quanming = this.xing + val
},
},
}) </script>
</html>
class 与 style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c{
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
}
.c1{
background-color: green;
}
</style>
</head>
<body>
<div id="d1">
<div class="c" v-bind:class="{c1:status}" v-on:click="change"></div>
<!-- v-bind 绑定class 若是status为true则添加class="c1"-->
<!-- v-on 监听点击事件，执行change指向函数中的操作-->
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
status:false,
},
methods:{
change:function(){
this.status = !this.status
// 状态反转：给同一个变量每次赋予相反的值。
},
}
})
</script>
</html>
条件渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<template v-if="status">
<p>沉默着，走了有，多遥远</p>
<p>抬起头，慕然间，才发现</p>
<p>一直倒退</p>
</template>
<p v-else>忘记时间</p>
<!-- 同if else语句 若status为true则显示if语句，否则显示else语句 -->
<hr>
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
<hr>
<ul>
<li v-for="i,index in list">{{index}}:{{i}}</li>
<!--for循环的第一个变量就是值，第二个是索引，值永远是第一个-->
</ul>
<hr>
<ul>
<li v-for="v,k,i in obj">{{i}}:{{k}}:{{v}}</li>
<!--第一个值也是值，第二个是键,第三个是索引-->
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
status:true,
list:[
"吃饭",
"睡觉",
"打豆豆",
],
obj:{
name:"清秋",
age:17
}
},
})
</script>
</html>
表单绑定：
你可以用 v-model 指令在表单 <input> 及 <textarea>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue实例的数据作为数据来源，所以应该通过JavaScript在组件的data选项中声明初始值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<input type="text" v-model.trim="msg">
<!--v-model 双向绑定，实时获取更新数据
trim：去除空格-->
<p>{{msg}}</p>
<hr>
<div id="example-3">
<input type="checkbox" id="jack" value="basketball" v-model = "hobby">
<label for="jack">篮球</label>
<input type="checkbox" id="john" value="football" v-model = "hobby">
<label for="john">足球</label>
<input type="checkbox" id="mike" value="tennis" v-model = "hobby">
<label for="mike">网球</label>
<br>
<span>我的爱好：{{hobby}}</span>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#d1",
data:{
msg:'',
hobby:[],
},
})
</script>
</html>
小清单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: green;
}
.c2{
text-decoration: line-through;
}
</style>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="contanier " style="margin-top: 100px">
<div class="row">
<div id="d1" class="col-md-6 col-md-offset-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">小清单</h3>
</div>
<div class="panel-body">
<!--输入框开始-->
<div class="input-group">
<input v-model="item.title" type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button v-on:click="add" class="btn btn-default" type="button"><span
class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
<!--输入框结束-->
<hr>
<!--列表组开始-->
<div class="list-group">
<div id="event" v-for="(items,index) in eventlist" class="list-group-item" v-bind:class="{c2:items.status}">
<span class="glyphicon glyphicon-ok-sign" v-bind:class="{c1:items.status}" v-on:click="change(index)"> </span>
{{items.title}}
<span v-on:click="remove(index)" class="glyphicon glyphicon-remove pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#d1",
data: {
eventlist: [],
item:{
status:false,
title:"",
}
},
methods: {
change:function(index){
alert(index);
this.eventlist[index].status = !this.eventlist[index].status;
},
add:function(){
var obj = Object.assign({},this.item);
this.eventlist.push(obj);
this.item.title="";
},
remove:function(index){
this.eventlist.splice(index,1);
}
},
})
</script>
</html>
小清单
Vue语法的更多相关文章
- vue语法之拼接字符串
先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...
- Sublime Text2支持Vue语法高亮显示
1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...
- 人人开源分模块，非原生html报错，很难查找问题所在，有vue语法
<!DOCTYPE html> <html> <head> <title>学生表</title> #parse("sys/head ...
- sublime text 3 vue 语法高亮
1.下载文件 链接 https://github.com/vuejs/vue-syntax-highlight 2.sublime菜单栏->Preferences->Browse Pack ...
- 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 ...
- vue语法精简（方便开发查阅）
vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...
- 如何解决Django与Vue语法的冲突
当我们在django web框架中,使用vue的时候,会遇到语法冲突.因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1:在django1.5以后,加入了标签:{% ver ...
- Django与Vue语法冲突问题完美解决方法
当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% ...
- VScode保持vue语法高亮的方式
VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 C ...
- 一、VS支持Vue语法
一.VS支持Vue语法
随机推荐
- C++里的单体类实现
单件模式是设计模式中最简单的模式了. 定义: 确保一个类只有一个实例,并提供一个全局的访问点. 把一个类设计成自己管理的一个单独实例,同时避免其他类再自行生成实例(所以构造函数用protect或pri ...
- $timeout
$timeout 会在执行后刷新页面上 与angular 相关的变量,在于jQuery共用修改页面变量时,这很可能会导致刷新跳动的现象:
- vue中父子组件值的传递
父传子 父组件:
- Nodejs下express+ejs模板的搭建
nodejs的环境配置,这里就不做说明了.在nodejs安装后的步骤在这里说明一下 首先 全局安装express npm install -g express-generator 安装ok后,接着 ...
- js之10天内免登陆
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用Percona Xtrabackup创建MySQL slave库
一.使用Percona Xtrabackup创建MySQL slave库 MySQL Server 版本: Server version: 5.7.10-log MySQL Community Ser ...
- Spring 管理Filter和Servlet
本文转载自:http://www.open-open.com/lib/view/open1417248512252.html 在使用spring容器的web应用中,业务对象间的依赖关系都可以用cont ...
- WPF 应用完全模拟 UWP 的标题栏按钮
WPF 自定义窗口样式有多种方式,不过基本核心实现都是在修改 Win32 窗口样式.然而,Windows 上的应用就应该有 Windows 应用的样子嘛,在保证自定义的同时也能与其他窗口样式保持一致当 ...
- 《selenium2 python 自动化测试实战》（3）——操作测试对象
上一节我们说了如何定位元素,定位到元素以后就涉及到对元素的操作了,webdriver中常用的操作元素的方法有: clear ——用于清除输入框的默认内容 send_keys ——用于在一个输入框里 ...
- BZOJ5369 [Pkusc2018]最大前缀和
题意 小C是一个算法竞赛爱好者,有一天小C遇到了一个非常难的问题:求一个序列的最大子段和. 但是小C并不会做这个题,于是小C决定把序列随机打乱,然后取序列的最大前缀和作为答案. 小C是一个非常有自知之 ...