Vue：基础语法
v-bind
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新！
我们还可以使用v-bind来绑定元素特性!
代码：
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
script>
body>
html>
你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息’，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
v-if,v-else
什么是条件判断语句，就不需要我说明了吧（￣▽￣）,以下两个属性！
- v-if
- v-else
代码：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="vue">
<h1 v-if="ok">YESh1>
<h1 v-else>NOh1>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
ok: true
}
});
script>
body>
html>
测试：
- 在浏览器上运行，打开控制台！
- 在控制台输入 vm.ok = false ，然后 回车，你会发现浏览器中显示的内容会直接变成 NO
注：使用 v-* 属性绑定数据是不需要 双花括号 包裹的
v-else-if
- v-if
- v-else-if
- v-else
注：=== 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）
代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h1 v-if="type==='A'">Ah1>
<h1 v-else-if="type==='B'">Bh1>
<h1 v-else-if="type==='D'">Dh1>
<h1 v-else>Ch1>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
});
script>
body>
html>
测试：
- 在浏览器上运行，打开控制台！
- 在控制台输入 vm.type = B ，然后 回车，你会发现浏览器中显示的内容会直接变成 B
注：使用 v- 属性绑定数据是不需要 双花括号 包裹的*
v-for
v-for格式说明：
<div id="vue">
<li v-for="item in items">
{{ item.message }}
li>
div>
注：items 是数组，item是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！
代码：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="vue">
<li v-for="item in items">
{{ item.message }}
li>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
//items数组
items: [
{message: '你好vue'},
{message: '前段好学吗'}
]
}
});
script>
body>
html>
测试 ：在控制台输入 vm.items.push({message: ‘来说具体内容’}) ，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条 来说具体内容。
v-on
v-on 监听事件
v-on:click
事件有Vue的事件、和前端页面本身的一些事件！我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件！
代码：
<html xmlns:v-on="">
<head>
<meta charset="UTF-8">
<title>事件处理 v-on示例1title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<button v-on:click="sayHi">点我button>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',//表示当前vue对象接管了div区域
data: {
message: 'Hello World'
},
// 方法必须定义在 Vue 实例的 methods 对象中
methods: {
sayHi: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert(this.message);
}
}
});
script>
body>
html>
v-on:keydown
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理 v-on示例2title>
head>
<body>
<div id="app">
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun2:function(msg,event){
if(!
((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){
event.preventDefault();
}
}
}
});
script>
body>
html>
v-on:mouseover
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理 v-on示例3title>
head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">这是一个文件域 textarea>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("div");
},
fun2:function(event){
alert("textarea");
event.stopPropagation();//阻止冒泡
}
}
});
script>
body>
html>
v-text与v-html
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<div v-text="message">div>
<div v-html="message">div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:"来嘛，快活呀
"
}
});
script>
body>
html>
v-model
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="fun" value="获取">
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
user:{username:"",password:""}
},
methods:{
fun:function(){
alert(this.user.username+" "+this.user.password);
this.user.username="tom";
this.user.password="11111111";
}
}
});
script>
body>
html>
如果还有需要学习的可以查看vue官网。
如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客