目录
vue的模版语法
数据绑定
vue的模版语法
关于模版这个概念
root容器里面被称为模版
我们的语法分为插值语法和插值语法
这样就是实现了插值语法
接下来我们实现指令语法
首先我们写一个a标签
链一个超链接上去
<h1>指令语法</h1><a href="https://gczdy.blog.csdn.net/">点我去学习</a>我们去网页中去查看
我们要让这个地址是动态的
我们要把这个地址存在vue实例当中
我们想的是把url存入
再在容器中去调用
但是我们打开控制台
发现我们在这里放入的是{{url}}
而且我们的控制台有一个警告
我们查看一下这个警告
我们修改一下写法
v-bind
表示绑定的意思
给标签里面的属性去动态的绑定数值
v-bind的意思就是把引号里面的东西拿出来做一个js表达式的处理
就是把这个写在引号里的url看做一个变量
而不是 普普通通的把引号里面的东西看做字符串
那么我们什么时候用插值语法和指令语法呢
插值语法往往用于指定
标签体内容
总结
我们把引号内的内容加载为js表达式源自于
冒号
练习
浏览器页面展示
我们也可以写成这种多级结构
<!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>数据绑定
页面展示
<!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的开发者工具
查看信息
去控制台找找这个信息
document.querySelector("input").value
<!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值都会进行改变
总结
我们一般表单类元素
采用的是双向绑定
因为这些数值一般都需要我们去捕获
v-model 就是对 value进行分析捕获的
<!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>个人号推广
博客主页
朱道阳-CSDN博客
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
