-
【尚硅谷 Vue学习笔记】P5 hello小案例 P6分析Hello案例 P7模板语法 P8数据绑定
P5hello小案例
初始Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2，root容器里的代码依然符合html规范，只不过混入一些特殊的Vue语法
3，root容器里的代码被称为【Vue模板】
4,Vue实例和容器是一一对应的
5，真实开发中只有一个Vue实例，并且会配合着组件一起使用
6，{{xxx}}中xxx要写js表达式，且xxx可以自动读到data中所有属性
7，一旦data中数据发生改变，那么模板中用到该数据的地方也会自动更新
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--引入Vue--> <script type="text/javascript" src="../js/vue.js"></script> <title>初始Vue</title> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>Hello,尚硅谷</h1> <h1>Hello,{{name}}</h1> </div> <!--容器外不行--> <h1>Hello,{{name}}</h1> <script type="text/javascript"> Vue.config.productionTip=false;//阻止vue在启动时生产提示 //创建Vue实例 //这里是Vue开端 //里面装一个对象 const x=new Vue({ el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{//data中用于存储数据，数据供el所指定的容器去使用 name:'尚硅谷' } }) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
P6分析Hello案例
一个实例对应多个容器：
结果：
多个实例对应一个容器:
一 一对应：
万一以后写的太多：（组件）
注意区分：
js表达式 和 js代码（语句）
1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
（1）a
（2）a+b
（3）demo(1)
（4）x==y?‘a’:‘b’
2.js代码（语句）
（1）if(){}
（2）for(){}
<h1>Hello,{{Date.now()}}</h1>- 1
P7模板语法
<div class="root"> <h1>插值语法</h1> <h1>你好，{{name}}</h1> <hr/> <h1>指令语法</h1> <!--地址写死了，这里url写什么--> <a href="http://www.baidu.com">百度地址写死了</a> <a href="url">百度</a> </div> <script type="text/javascript"> Vue.config.productionTip=false;//阻止vue在启动时生产提示 //创建Vue实例 //这里是Vue开端 //里面装一个对象 new Vue({ el:'.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{//data中用于存储数据，数据供el所指定的容器去使用 name:'尚硅谷', url:'http://www.baidu.com' } }) </script> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
指令语法
如何写url
<a href="url">百度</a> //普通标签写了 <a v-bind:href="url">百度</a>//当成js表达式执行- 1
- 2
v-bind: 简写成 :- 1
- 2
总结：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中所有属性
2.指令语法：
功能:用于解析标签（包括：标签属性、标签体内容、绑定事件）。
举例：
v-bind:href=“xxx”
或简写成 : href=“xxx”
xxx同样要写js表达式，且可以直接读取到data中的所有属性
多级
<!--准备好一个容器--> <div class="root"> <h1>插值语法</h1> <h1>你好，{{name}}</h1> <hr/> <h1>指令语法</h1> <!--地址写死了--> <a href="http://www.baidu.com">百度地址写死了</a> <a v-bind:href="url">百度指令语法</a> <a :href="url">百度简写</a> <a :href="bili.url">{{bili.name}}</a> </div> <script type="text/javascript"> Vue.config.productionTip=false;//阻止vue在启动时生产提示 //创建Vue实例 //这里是Vue开端 //里面装一个对象 new Vue({ el:'.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{//data中用于存储数据，数据供el所指定的容器去使用 name:'尚硅谷', url:'http://www.baidu.com', bili:{ name:'b站', url:'https://www.bilibili.com' } } }) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
P8数据绑定
单向绑定:v-bind
双向绑定:v-model
<!--准备好一个容器--> <div id="root"> 单向数据绑定：<input type="text" v-bind:value="name"> <br> 双向数据绑定：<input type="text" v-model:value="name"> </div> <script type="text/javascript"> Vue.config.productionTip=false;//阻止vue在启动时生产提示 //创建Vue实例 //这里是Vue开端 //里面装一个对象 new Vue({ el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{//data中用于存储数据，数据供el所指定的容器去使用 name:'尚硅谷' } }) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
总结
Vue中有两种数据绑定的方式：
1.单向绑定（v-bind）：数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单元素上（如：input，select等）
2.v-model可以简写为v-model，因为v-model默认收集的就是value值
完整： 双向数据绑定： 简写： 双向数据绑定：- 1
- 2
- 3
- 4
-
相关阅读:
行驶证识别易语言代码
java计算机毕业设计购物网站源码+数据库+系统+lw文档+mybatis+运行部署
抛弃BeanUnits.copyProperties三部曲
56.合并区间 | 1288.删除被覆盖的区间 | 986.区间列表的交集
根据关键词取商品列表 API 返回值说明
聊聊不是产品经理的程序员如何做产品经理
测试用例例子：在线购物平台的结算功能测试
Linux——（第五章）用户管理
报错opencv2:compileDebugJavaWithJavac
你能懂的 Reflect 反射
- 原文地址：https://blog.csdn.net/m0_54381284/article/details/127827358
