目录
vue的模版语法
关于模版这个概念
root容器里面被称为模版
![](https://i-blog.csdnimg.cn/direct/912d094f546541fc88be5008bb9fd26a.png)
我们的语法分为插值语法和插值语法
![](https://i-blog.csdnimg.cn/direct/aeb1816d16284fcfbe31329086cc231d.png)
这样就是实现了插值语法
![](https://i-blog.csdnimg.cn/direct/a87a1705561d48c4a0455af53dccaa43.png)
接下来我们实现指令语法
首先我们写一个a标签
链一个超链接上去
<h1>指令语法</h1>
<a href="https://gczdy.blog.csdn.net/">点我去学习</a>
我们去网页中去查看
![](https://i-blog.csdnimg.cn/direct/7c4e4d15507742e1a896a84da4590942.png)
我们要让这个地址是动态的
我们要把这个地址存在vue实例当中
我们想的是把url存入
![](https://i-blog.csdnimg.cn/direct/0fd8e845020446eebe957aca27996eb2.png)
再在容器中去调用
![](https://i-blog.csdnimg.cn/direct/3be5e176c4074e67841ae6dc47624d06.png)
但是我们打开控制台
发现我们在这里放入的是{{url}}
![](https://i-blog.csdnimg.cn/direct/ad1b4dcf4f2d49d0b85fbee18132c989.png)
而且我们的控制台有一个警告
我们查看一下这个警告
![](https://i-blog.csdnimg.cn/direct/5cfad510d29e4f889bbefc912e0974e8.png)
我们修改一下写法
v-bind
表示绑定的意思
给标签里面的属性去动态的绑定数值
![](https://i-blog.csdnimg.cn/direct/0291333b894a44a7b98aa5d2501993ab.png)
v-bind的意思就是把引号里面的东西拿出来做一个js表达式的处理
就是把这个写在引号里的url看做一个变量
而不是 普普通通的把引号里面的东西看做字符串
那么我们什么时候用插值语法和指令语法呢
插值语法往往用于指定
标签体内容
![](https://i-blog.csdnimg.cn/direct/0a26817f1ba240fa96cf281cd898befd.png)
总结
![](https://i-blog.csdnimg.cn/direct/d27bec8583d249df81e037e00aadd56c.png)
我们把引号内的内容加载为js表达式源自于
冒号
![](https://i-blog.csdnimg.cn/direct/e2a65f43575d4b039207087b929bec6c.png)
练习
![](https://i-blog.csdnimg.cn/direct/82fb3051253545eb982642a020e9203a.png)
浏览器页面展示
![](https://i-blog.csdnimg.cn/direct/2fa860ff69b14887af45fd72e52b5cf1.png)
我们也可以写成这种多级结构
![](https://i-blog.csdnimg.cn/direct/a1f17bcd7a1844e3934339c512c5eeb2.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入 vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- Vue 插值语法-->
<h1>Hello,{{name}},{{adderss}},{{Date.now()}}</h1>
<h3>你好 {{id}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="url">点我去{{name}}学习</a>
</div>
<script type="text/javascript">
//阻止 Vue 在启动时生成生产提示
Vue.config.productionTip=false;
//创建 Vue 实例
new Vue({
//用于指定当前 Vue 实例为哪个容器服务 值通常为 css 选择器字符串
el:'#root',
//data 中用于存储数据 数据供 el 所指定的容器去使用
//数值我们暂时先写成一个对象
data:{
name:'博客',
adderss:'北京昌平',
id:'jack',
url:'https://gczdy.blog.csdn.net/'
}
})
</script>
</body>
</html>
数据绑定
![](https://i-blog.csdnimg.cn/direct/409abafa513f45efbe35bf54a24bd839.png)
页面展示
![](https://i-blog.csdnimg.cn/direct/d047ce4a97db4b87a8a727cf30df7f2d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入 vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- Vue 插值语法-->
单向数据绑定 <input type="text" v-bind:value="name">
</div>
<script type="text/javascript">
//阻止 Vue 在启动时生成生产提示
Vue.config.productionTip=false;
//创建 Vue 实例
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</body>
</html>
我们找vue的开发者工具
查看信息
![](https://i-blog.csdnimg.cn/direct/df87bd3ae6b245d79282f9e5f502087b.png)
去控制台找找这个信息
document.querySelector("input").value
![](https://i-blog.csdnimg.cn/direct/56e6ef5922d040e5a8e2c2095691ded4.png)
![](https://i-blog.csdnimg.cn/direct/f0f82b33e9dc4bb5a98b71ca02cb58e9.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入 vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- Vue 插值语法-->
单向数据绑定 <input type="text" v-bind:value="name">
双向数据绑定 <input type="text" v-model:value="name">
</div>
<script type="text/javascript">
//阻止 Vue 在启动时生成生产提示
Vue.config.productionTip=false;
//创建 Vue 实例
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</body>
</html>
我们在这边
双向绑定输入内容
就会发现value值都会进行改变
![](https://i-blog.csdnimg.cn/direct/1813ef897e2741ca8042ddb2e04dae6a.png)
总结
![](https://i-blog.csdnimg.cn/direct/5b41a477e6a24413beee0cd46ff6aa12.png)
我们一般表单类元素
采用的是双向绑定
因为这些数值一般都需要我们去捕获
v-model 就是对 value进行分析捕获的
![](https://i-blog.csdnimg.cn/direct/b1551cc396de4611b1d01491e15f3b7c.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入 vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- Vue 插值语法-->
单向数据绑定 <input type="text" v-bind:value="name">
双向数据绑定 <input type="text" v-model:value="name">
<!--简写-->
单向数据绑定 <input type="text" :value="name">
双向数据绑定 <input type="text" v-model="name">
</div>
<script type="text/javascript">
//阻止 Vue 在启动时生成生产提示
Vue.config.productionTip=false;
//创建 Vue 实例
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</body>
</html>
个人号推广
博客主页
Web后端开发
https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482
Web前端开发
https://blog.csdn.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482
数据库开发
https://blog.csdn.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482
项目实战
https://blog.csdn.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482
算法与数据结构
https://blog.csdn.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482
计算机基础
https://blog.csdn.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482
回忆录
https://blog.csdn.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482