cgb2107-day12 我不是女神ヾ 2021-09-11 03:36 277阅读 0赞 ### 文章目录 ### * * 一,练习 * * \--1,测试 * 二,vue指令 * * \--1,概述 * \--2,测试 * 三,Vue指令v-on v-bind * * \--1,测试 * 四,Vue 组件 * * \--1,概述 * \--2,测试 * 五,Vue项目 * * \--1,安装脚手架 * \--2,配置项目 ## 一,练习 ## ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_15_color_FFFFFF_t_70_g_se_x_16] ### –1,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue基础语法</title> <!-- 引入外部文件的路径问题: 1. 如果你想要的引入的资源,和你在同级目录,直接写 vue.js 2. 如果你想要的引入的资源,和你不在同级目录,就先写同级的目录再继续写资源名称js/vue.js --> <script src="js/vue.js"></script> </head> <body> <div id="d1"> { {msg}} { {show()}} { {add(1,2)}} </div> <script> new Vue({ el:"#d1", data:{ msg:100 }, methods:{ // show:function(){ //标准写法 show(){ //简写 alert(1) }, // add:function(a,b){ //标准写法 add(a,b){ //简写 alert(a+b) } } }) </script> </body> </html> ## 二,vue指令 ## ### –1,概述 ### 使用方式: 就是在HTML的标签上,加一些v-的指令. v-model: 实现数据驱动,双向绑定. v-if: 用来判断,不满足判断条件就不展示 v-show: 用来判断,不满足判断条件就不展示(通过css实现) v-else-if / v-else : 顺序的要求类似于java v-cloak : 用来解决闪现问题(网页展示了插值表达式) v-html: 获取数据,也可以解析HTML标签 ### –2,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue指令</title> <!-- 1.引入vue.js --> <script src="js/vue.js"></script> <style> [v-cloak]{ display: none; } </style> </head> <body> <!-- 2.准备数据渲染区 --> <div id="app" v-cloak> { {msg}} <br /> { {msg}} <br /> <!-- 2.1. v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上 数据驱动,双向绑定: 改Model会影响View,改View会影响Model --> <input type="text" v-model="msg" /> <!-- 2.2. v-html指令可以解析数据,并识别HTML代码 --> <p v-html="msg"></p> <!-- 2.3. v-cloak指令解决插值表示的闪现问题 --> <!-- 2.4. v-if指令用来做判断,条件满足才展示,不满足就不展示 --> <p v-if="person.age>=18">成年人</p> <!-- 2.5. v-show指令也用来做判断,不满足的话,利用css控制着style="display: none;" --> <p v-show="person.age>=18">成年人</p> <!-- 2.6. v-else指令,组成顺序依次 if...else if...else --> <p v-if="type === 'A'">优秀</p> <p v-else-if="type === 'C'">中等</p> <p v-else-if="type === 'B'">良好</p> <p v-else>错误</p> <!-- 2.7. v-for指令用来循环,可以循环数组,类似于JS里的for...in语法, i表示遍历得到的数据,index是下标 --> <ol> <li v-for="i in arr">{ {i}}</li> </ol> <ul> <li v-for="i,index in arr">数据是:{ {i}} -> 下标是:{ {index}}</li> </ul> </div> <!-- 3.创建Vue对象 --> <script> new Vue({ el:"#app", //挂载点 data: { //要被渲染的数据 msg : '<h1>hello vue123</h1>', type: 'C' , person:{ age:10 }, arr : ['杨幂','迪乐热巴','Anglelababa'] } }) </script> </body> </html> ## 三,Vue指令v-on v-bind ## ### –1,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue指令</title> <!-- 引入vue.js --> <script src="js/vue.js"></script> </head> <body> <!-- 渲染区 --> <div id="app"> <!-- 1. v-on指令用来给HTML元素添加Vue事件, 用:指定事件的触发方式v-on:可以简写成一个@ --> <button v-on:click="show()">点我1</button> <button @click="say('hi bro')">点我2</button> <button v-on:dblclick="say('hi vue')">点我3</button> <!-- 练习:计数器,点一次按钮就把次数++ --> <button v-on:click="count++">赞{ {count}}</button> <!-- 2. v-bind指令用来获取变量的值--> <a href="{ {url}}">点我跳转1</a> <!-- 错的 --> <a v-bind:href="url">点我跳转2</a> <!-- 对的 --> <a :href="url">点我跳转3</a> <!-- 简写 --> </div> <!-- Vue对象 --> <script> new Vue({ el:"#app",//挂载点 data:{ count:0 ,//计数器 url:'https://www.baidu.com' }, methods:{ //存方法 // show:function(){ show(){ //函数的简写形式 alert(100); }, say(a){ alert(a); } } }) </script> </body> </html> ## 四,Vue 组件 ## ### –1,概述 ### 当想要扩展HTML的功能时,使用vue定义一些组件. 1,全局组件: Vue.component(组件名, 组件的功能) 2,局部组件: 在Vue对象里, 再加一个属性components 3,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用 区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用. ### –2,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 组件Component</title> <!-- 1.导入vue.js --> <script src="js/vue.js"></script> </head> <body> <!-- 2.数据渲染区 --> <div id="app"> <!-- 5.使用组件 --> <Hellocom></Hellocom> </div> <div id="d1"> <Hellocom></Hellocom> <person></person> </div> <script> //4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签 //Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果 Vue.component('Hellocom',{ template : '<h1>你好 Vue组件</h1>' //组件的显示效果 }) //3. 创建Vue对象 new Vue({ el:'#app' }) new Vue({ el:'#d1' , // 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用) components: { 'person':{ //组件名 template : '<h1>你好 person组件</h1>' //组件的显示效果 } } }) </script> </body> </html> ## 五,Vue项目 ## ### –1,安装脚手架 ### node -v #检查nodejs的安装版本 npm config get registry # 查看当前配置的镜像，结果是默认的国外网址 npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像 npm install vue-cli -g #安装vue-cli脚手架 vue -V #查看版本 where vue #vue安装在哪里 ### –2,配置项目 ### vue init webpack jt01 # 慢,等....做了很多选择 # 可能需要执行多次才会成功 cd jt02 #进入项目目录 npm run dev #启动项目 打开浏览器访问网址: http://localhost:8080 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16] ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16 1] ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16 2] [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/199b634930444c8b908ee9bae1bf7ec9.png [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/0914f618025e455ab377ee42336fabdc.png [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20210911/080c0aa332af421ea54fc322f6e56374.png [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20210911/e13ae83963204aa8886ce54fcf6aea90.png
相关 cgb2107-day08 文章目录 一,模拟 服务器解析浏览器发来的数据 二,CSS选择器 \--1,概述 \--2,简单选择器 旧城等待，/ 2021年09月11日 03:36/ 0 赞/ 267 阅读
相关 cgb2107-day06 文章目录 一,作业 \--1，需求: 模拟用户登录现象 \--2，测试 \--3,标准的释放资 淡淡的烟草味﹌/ 2021年09月11日 03:34/ 0 赞/ 271 阅读
小鱼儿
我就是我
我不是女神ヾ
╰+攻爆jí腚メ
傷城~
朱雀
还没有评论，来说两句吧...