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语法
随机推荐
- React-Native基础_5.列表视图ListView 网络数据展示
//获取网络数据 并用列表展示 豆瓣Top250 api /** * Sample React Native App * https://github.com/facebook/react-nativ ...
- 我也说说Emacs吧(1) - Emacs和Vi我们都学
好友幻神的<Emacs之魂>正在火热连载中,群里人起哄要给他捧捧场. 作为一个学习Emacs屡败屡战的用户,这个场还是值得捧一下的.至少我是买了HHKB键盘的... 从我的键盘说起 - 有 ...
- css 发光样式
结果: css/style1.css: /*setup*/ *{ margin:; padding:; } @font-face { font-family: 'Monoton'; font-styl ...
- async eachSeries如何按序列执行下去
async callback要执行完才会进到一下个序列 async.mapSeries(files, function(file, outerCB) { var all = fs.readdirsyn ...
- C# ListBox 子项数据更新
今天在倒腾ListBox控件的数据编辑时,遇到了一个小小的问题,现在就把解决方法记录下来,如果各位道友有更好的方法,一定要留言赐教. 问题还原: 有一个界面,有这么一个ListBox用来显示所有的角色 ...
- SSH项目搭建（二）
本章讲解SSH项目需要到哪些jar包,及各个jar包的作用 一.struts2 1.下载好struts2,struts2文件夹>>>>apps>>>>a ...
- MySQL的用户账户管理
1.开启MySQL远程连接 1.sudo -i 2.cd /etc/mysql/mysql.conf.d/ 3.vim mysqld.cnf #bind-address = 127.0.0.1 把前面 ...
- spi总结
SPI的四种模式 SPI的相位(CPHA)和极性(CPOL)分别可以为0或1,对应的4种组合构成了SPI的4种模式(mode) Mode 0:CPOL = 0,CPHA = 0 Mode 1:CPOL ...
- 每天一个linux命令：【转载】pwd命令
Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...
- UWP 中的 LaunchUriAsync，使用默认浏览器或其他应用打开链接
古老的 Win32 应用启动其他程序太过方便,以至于一部分开发者都已经不记得 Windows 能通过关联协议的方式通过统一资源定位符(URI)来启动应用程序了. 转到 UWP 后,使用 URI 启动应 ...