cgb2106-day10 快来打我* 2021-09-11 03:24 251阅读 0赞 ### 文章目录 ### * * 一,Vue的基础语法 * * \--1,运算符 * \--2,定义函数 * \--3,Vue解析各种形式的数据 * \--4,Vue中data的三种写法 * 二,Vue的指令 * * \--1,测试 * 三,Vue脚手架 * * \--1,执行以下命令 ## 一,Vue的基础语法 ## ### –1,运算符 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 vue的运算符</title> <!-- 1. 导入vue.js --> <script src="vue.js"></script> </head> <body> <!-- 2. 准备数据渲染区 , 使用插值表达式获取数据 --> <div id="app"> 插值表达式获取值: { {a}} { {b}} 加减乘除: { {a+b}} { {a-b}} { {a*b}} { {a/b}} { {a%b}} 三元表达式: { {a>b?a:b}} 字符串的操作: { {c}} { {c.length}} { {c.concat(123)}} { {c.replace('l','857')}} </div> <!-- 3. 创建Vue对象 --> <script> new Vue({ el: "#app", //挂载点:数据的渲染区 data: { //即将要展示的数据 a : 10 , b : 20, c : "hellovue" } }) </script> </body> </html> ### –2,定义函数 ### 先在methods定函数,然后使用插值表达式调用函数 () <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 vue的函数</title> <!-- 导入vue.js --> <script src="vue.js"></script> </head> <body> <!-- 准备数据渲染区 --> <div id="app"> 调用vue的函数:{ {show()}} { {add(1,2)}} </div> <!-- 创建Vue对象 , 添加自定义函数 --> <script> new Vue({ el:"#app", //挂载点 data:{ //要被渲染的数据 name:"jack" }, methods : { //自定义的函数 //函数名 : 定义函数的语法 show : function(){ console.log("hello vue") }, add : function(a,b){ console.log(a) } } }) </script> </body> </html> ### –3,Vue解析各种形式的数据 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue解析 对象和数组</title> <!-- 1.导入vue.js --> <script src="vue.js"></script> </head> <body> <!-- 2.准备数据渲染区 --> <div id="app"> <!-- 解析对象保存的数据语法: 对象名.属性名 --> 解析对象的数据: name属性的值是:{ { a.name }} , age属性的值是:{ {a.age}} name属性的值是:{ { b.name }} , age属性的值是:{ {b.age}} 调用函数: { {a.show()}} 解析数组里的数据(利用下标): { {c[1].fristname}} </div> <!-- 3.创建Vue对象 --> <script> new Vue({ el : "#app", //挂载点 data:{ //数据区 //对象名 : 对象信息 a : { //自定义对象 name:"jack", age:20, show:function(){ alert(100) } }, b : { name : "rose", age : 30 }, c : [//数组::::[ { k:v , k:v} ,{ k:v , k:v } ] { fristname : "jack", lastname : 123 }, { fristname : "rose", lastname : 456 } ] } }) </script> </body> </html> ### –4,Vue中data的三种写法 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 data的三种写法</title> <!-- 引入js --> <script src="vue.js"></script> </head> <body> <!-- 准备数据渲染区 --> <div id="app"> { {msg}} </div> <!-- 创建Vue对象 --> <script> new Vue({ el : "#app", data(){ //新语法 return{ msg:"hello" } } // data : function(){ // return{ // msg : "hello vue" // } // } }) </script> </body> </html> ## 二,Vue的指令 ## ### –1,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue的指令</title> <script src="vue.js"></script> <style> /*css语法: 选择器{属性名:属性值} */ [v-cloak]{ //不展示闪现的效果 display: none; } </style> </head> <body> <!-- 2. v-cloak解决闪现的问题:在浏览器上显示了插值表达式 使用v-cloak属性,使用css隐藏效果 --> <div id="app" v-cloak> { {msg}} { {msg}} { {msg}} { {msg}} { {msg}} <!-- 1. v-model双向绑定 --> <input type="text" v-model="msg" /> <!-- 3. v-if用来判断的,满足了条件才展示 --> { {age}} <!-- v-if和v-show的区别? 都可以判断,但是后者即使不满足条件也会被网页加载只是隐藏了 --> <span v-if="age>=18">成年人</span> <span v-show="age>=18">成年人</span> <!-- v-if v-else-if v-else 组合的判断条件--> <span v-if="age>=60">老年人</span> <span v-else-if="age>=30">青壮年</span> <span v-else>少年</span> <!-- 4. v-for用来循环的 --> 用下标获取数组里的元素 : { {arr[0]}} { {arr[1]}} { {arr[2]}} <!-- o代表取到的数据,arr是数组名,相当于增强for循环 --> 用v-for获取数组里的元素 : <h1 v-for="o in arr"> { {o}}</h1> <!-- o代表取到的数据,i代表下标,arr是数组名,相当于普通for循环 --> 用v-for获取数组里的元素 : <h1 v-for="o,i in arr">下标是{ {i}},数据是{ {o}}</h1> <!-- 5. v-on用来绑定事件,点击按钮时触发函数,@是一种简写形式简化了 v-on: --> <button v-on:click="show()">点我1</button> <button v-on:dblclick="show()">点我2</button> <button @click="show()">点我3</button> <button @dblclick="show()">点我4</button> <!-- 6. v-bind:用来获取变量的值, 可以简写成冒号的形式 --> <a href="{ {url}}">链接1</a> <!-- 错的,把整个的插值表达式当做字符串了 --> <a v-bind:href="url">链接2</a><!-- 获取了变量的值 --> <a :href="url">链接3</a> </div> <script> new Vue({ el:"#app", data:{ msg : "hello vue", age : 16, arr : [ "杨幂" ,"迪丽热巴" ,"Anglelababa"] , url : "https://www.baidu.com" }, methods:{ show : function(){ console.log('迪丽热巴还爱你') } } }) </script> </body> </html> ## 三,Vue脚手架 ## ### –1,执行以下命令 ### C:\Users\Administrator>node -v C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org C:\Users\Administrator>npm config get registry C:\Users\Administrator>npm install vue-cli -g C:\Users\Administrator>vue -V C:\Users\Administrator>where vue
相关 cgb2106-day18 文章目录 一,Mybatis入门案例 \--0,导入mybatis的jar包 \--1,核心配置文件 港控/mmm°/ 2021年09月11日 03:28/ 0 赞/ 232 阅读
相关 cgb2106-day16 文章目录 一,Lombok \--1,概述 \--2,使用步骤 1, 在IDEA里安装插 我会带着你远行/ 2021年09月11日 03:26/ 0 赞/ 290 阅读
相关 cgb2106-day12 文章目录 一,ElementUI的表单 \--1,测试 \--2,效果 二,Maven 「爱情、让人受尽委屈。」/ 2021年09月11日 03:24/ 0 赞/ 309 阅读
相关 cgb2106-day10 文章目录 一,Vue的基础语法 \--1,运算符 \--2,定义函数 \--3,Vue解析各种 快来打我*/ 2021年09月11日 03:24/ 0 赞/ 252 阅读
相关 cgb2106-day11 文章目录 一,Vue脚手架 \--1,执行以下命令安装并检验 \--2,创建Vue项目的过程 二,自定 朱雀/ 2021年09月11日 03:24/ 0 赞/ 319 阅读
相关 cgb2106-day08 文章目录 一,模拟服务器解析数据 二,实现CSS代码和HTML代码的分离 \--1,新建css文件 \ 古城微笑少年丶/ 2021年09月11日 03:22/ 0 赞/ 318 阅读
相关 cgb2106-day01 文章目录 一,数据库 \--1,概述 \--2,Mysql数据库的安装 \--3,Mysql数 系统管理员/ 2021年09月11日 03:14/ 0 赞/ 264 阅读
偏执的太偏执、
港控/mmm°
我会带着你远行
红太狼
「爱情、让人受尽委屈。」
朱雀
系统管理员
还没有评论，来说两句吧...