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语法
随机推荐
- 深入理解Eureka之源码解析
转载请标明出处: http://blog.csdn.net/forezp/article/details/73017664 本文出自方志朋的博客 Eureka的一些概念 Register:服务注册 当 ...
- python中封装
封装 引子 从封装的本身意思去理解,封装就是用一个袋子,把买的水果.书.水杯一起装进袋子里,然后再把袋子的口给封上,照这样的理解来说,封装=隐藏,但是,这种理解是片面的 ## 如何封装 在python ...
- MySQL安装部署及调优
MySQL安装 二进制安装 - mysql-5.5.49 mkdir /home/oldboy/tools -p cd /home/oldboy/tools/ rz #mysql-5.5.49-lin ...
- 【剑指offer】 和为s的连续正数序列，C++实现
原创博文,转载请注明出处! # 题目 # 思路 设置两个辅助变量small和big,small表示序列的最小值,big表示序列的最大值.如果sum(small ~ big) > s,则增大sma ...
- Maven部署Jetty服务器pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- PDF文档过期时间/自毁设置
不是很完美的方法,可以凑活着用: 切换到Pages预览页,右击页面选页面属性 切换到Action,选Run a Javascript,代码: // PDF JavaScript to make it ...
- iOS应用截屏
iPhone自从推出后就自带了截屏功能,简单而易用,所以应用就没什么截屏的需求了,不过有些时候我们还是会遇到这个需求.比如,我们开发了一个播放器,用openGL进行video render,此时直接截 ...
- 《DSP using MATLAB》示例Example 6.26
代码: % r = 0.9; theta = (pi/180)*[-55:5:-35, 35:5:55]'; p = r*exp(j*theta); a = poly(p); b = 1; % Dir ...
- 异步加载JS几种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- 怎样在windows下和linux下获取文件(如exe文件)的具体信息和属性
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/25620685 程序猿都非常懒.你懂的! ...