cgb2108-day12

2024-08-22 06:58
文章标签 day12 cgb2108

本文主要是介绍cgb2108-day12，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • 一,DOM/JSON的练习
      • --1,测试
    • 二,Vue的语法
      • --1,定义函数
      • --2,定义复杂数据并解析
      • --3,data的三种写法
    • 三,Vue指令
      • --1,概述
      • --2,测试
      • --3,测试

一,DOM/JSON的练习

在这里插入图片描述

–1,测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 json的练习</title></head><body>姓名:<h1 id="a"></h1>年龄:<h1 name="b"></h1>住址:<h1 class="c"></h1><script>//1,定义json串var stu = '{"name":"tony","age":"20","addr":"北京"}' ;//2,解析json串的数据：json串->js对象var obj = JSON.parse(stu);//3,在对应位置展示数据：DOMdocument.getElementById("a").innerHTML=obj.name;//解析name属性的值document.getElementsByName("b")[0].innerHTML=obj.age;//解析age属性的值document.getElementsByClassName("c")[0].innerHTML=obj.addr;//解析addr属性的值</script></body>
</html>

二,Vue的语法

–1,定义函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue的基础语法</title><!-- 引入vue.js + 准备渲染区 + 创建Vue对象 --><script src="vue/vue.js"></script></head><body><div id="app">vue对字符串的操作:<br />字符串: {{str}} 字符串长度:{{str.length}}字符串的拼接:{{str.concat('vue')}}<br />调用vue的函数:{{show()}}  {{sout(1000)}}</div><script>// function a(){}// var a = function(){}let vm = new Vue({el:"#app" , //挂载点data:{ //给渲染区准备数据str:'hello'}  ,methods:{//1,创建vue的方法/函数//函数名:函数定义show:function(){console.log("show()调用成功")} ,sout:function(x){//定义时有参数,调用时也需要传入参数console.log('sout()调用成功'+x)}}})</script></body>
</html>

–2,定义复杂数据并解析

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue解析复杂格式的数据</title><script src="vue/vue.js"></script></head><body><div class="a"><h1>vue解析普通的数据: {{str}}</h1><h1>vue解析js对象的属性(对象名.属性名):{{car.name}} {{car.price}} </h1><h1>vue解析js对象的方法:{{car.run()}} {{car.tostring()}}</h1><h1>vue解析js数组的属性:{{arr[0].firstname}} {{arr[1].firstname}}</h1></div><script>// var car = {name:"BMW",price:9.9};new Vue({el:".a" ,//挂载点data:{ //即将要展示的数据str:'hello vue', //属性car:{ //创建对象name:"BMW", //对象的属性price:9.9 , //对象的属性// run:function(){//对象的方法run(){//对象的方法console.log("run()调用成功")} ,// tostring:function(){tostring(){console.log(this.name+","+this.price)}},arr:[//创建数组{firstname:"王",lastname:"五"},{firstname:"张",lastname:"三"}]}})</script></body>
</html>

–3,data的三种写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 data里数据的三种写法</title><!-- 1.引入vue.js文件 --><script src="vue/vue.js"></script></head><body><!-- 2.数据渲染区 --><div id="app">{{msg}}</div><script>// 3.创建Vue对象let vm = new Vue({el:"#app" ,// 挂载点// data:{// 	msg:'vue'// }//data:function(){//方便的把组件间的关系实现松耦合,提高代码的复用性data(){//同上,只是简写形式return {msg:'vue'}}})</script></body>
</html>

三,Vue指令

–1,概述

是vue框架提供的,方便的展示网页元素语法.标识v-前缀.
使用: 引入vue.js + 在标签中添加特殊的属性v-*
常见指令: v-if v-for v-bind v-…

–2,测试

测试v-model v-cloak v-if v-show v-for 指令

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue指令</title><script src="vue/vue.js"></script><style>/* 选择器{属性名:属性值;} */[v-cloak]{display: none;/* 隐藏的属性 */}</style></head><body><div id="app" v-cloak>{{addr}}<!-- 1.v-model:实现了双向绑定,把数据和addr属性绑定,v-model可以获取addr的值也可以设置addr的值--><input type="text" v-model="addr"/><h1>你好:{{nick}}</h1><input type="text" v-model="nick"/><!-- 2.闪现v-cloak:在浏览器上展示了插值表达式 添加v-cloak属性,使用css隐藏插值表达式--><!-- 3.判断元素是否展示v-if:判断条件为true才展示 --><p v-if="person.age > 18">成年人</p><p v-show="person.age > 18">成年人</p><!-- 总结:v-if和v-show指令的区别?都可以判断,但是,不满足判断条件时,前者不会解析这个元素,后者元素会被解析只是使用css隐藏起来了<p style="display: none;">成年人</p> --><!-- 4.判断<10儿童,>18成年人,>60青年 --><p v-if="person.age<10">儿童</p><p v-else-if="person.age>18">成年人</p><p v-else>青年</p><ol><!-- 5.循环指令v-for:准备数组数据 + v-for指令遍历数组i是数据,a是下标,in是for..in的固定语法,hobby是数组的名字{{i}}是插值表达式获取i的值,{{a}}是插值表达式获取a的值--><li v-for="i in hobby"> {{i}} </li><li v-for="i,a in hobby"> 数据--{{i}},下标--{{a}}</li></ol></div><script>new Vue({el:'#app',//挂载点data:{addr:'广州',nick:'tom',person:{//js对象age:15},hobby:['吃鸡','王者','敲代码','吹牛皮']}})</script></body>
</html>

–3,测试

测试 v-on v-bind指令

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue指令</title><script src="vue/vue.js"></script></head><body><div id="app"><button v-on:click="fun()">单击按钮</button><!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 --><button v-on:dblclick="fun()">双击按钮</button><!-- 练习:用vue做一个点赞的按钮 QQ:2250432165--></div><script>new Vue({el:"#app", //挂载点methods:{  //创建函数fun(){console.log(1);}}})</script></body>
</html>

这篇关于cgb2108-day12的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1095568。

相关文章

linux笔记_day12_shell编程

linux笔记_day12_shell编程

linux笔记_day12_shell编程 1.shell中如何进行算术运算 　A=1 　B=2 　1)let 算术运算表达式 　　let C=$A+$B 　2）$[算术运算表达式] 　　C=$[$A+$B]    3)$(($A+$B)) 　4) expr 算术表达式，表达式中各操作数及运算符之间有空格，而且要使用命令引用（``） 　　F=`expr $A + $B` 2.exit
阅读更多...
chapter09-OOP高级部分——（main语法说明）——day12

chapter09-OOP高级部分——（main语法说明）——day12

目录 383-main语法说明 384-main特别说明 385-main动态传值 383-main语法说明 384-main特别说明 静态方法main不可以访问本类的非静态成员；如果要调用，要先创建对象实例 385-main动态传值
阅读更多...
cgb2108-day11

cgb2108-day11

文章目录 一,JS练习--1,测试 二,DOM--1,概述--2,测试 三,JSON--1,概述--2,测试创建js文件,存放js代码创建html网页文件,引入js代码 四,Vue--1,概述--2,入门案例--3,总结4,改造入门案例 五,Vue的运算符--1,测试 一,JS练习 –1,测试 <!DOCTYPE html><html><head><meta chars
阅读更多...
cgb2108-day06

cgb2108-day06

文章目录 一,JDBC--1,创建工具类--2,模拟用户登录--3,JDBC的练习--4,JDBC的总结--5,修改释放资源的代码 二,HTML--1,概述--2,入门案例 一,JDBC –1,创建工具类 package cn.tedu.jdbc;import java.sql.Connection;import java.sql.DriverManager;//提供丰富
阅读更多...
CGB2108笔记的链接大全

CGB2108笔记的链接大全

dy同名: cgblpx day18:https://blog.csdn.net/u012932876/article/details/120945595 day17:https://blog.csdn.net/u012932876/article/details/120898860 day16:https://blog.csdn.net/u012932876/article/details/1
阅读更多...
cgb2110-day12

cgb2110-day12

文章目录 一,练习 Vue--1,测试 二,Vue指令--1,概述--2,v-model & v-html & v-cloak--3,v-if & v-show--4,v-for & v-on--5,v-bind 三,Vue组件--1,概述--2,全局组件--3,局部组件--4,对比 四,Vue路由--1,概述--2,测试--3,总结 一,练习 Vue –1,测试 <!
阅读更多...
Python学习打卡：day12

Python学习打卡：day12

day12 笔记来源于：黑马程序员python教程，8天python从入门到精通，学python看这套就够了 目录 day1292、全国疫情地图构建数据整理获取数据数据整体结构（全国）省数据结构获取每个省份的确诊数据上述代码执行后输出，每个省的确诊数据 国内疫情地图创建地图添加数据设置全局设置，定制分段的视觉映射绘图 最终结果 93、河南省疫情地图构建获取河南省各市数据省数据结构把各市数据
阅读更多...
day12--150. 逆波兰表达式求值+239. 滑动窗口最大值+ 347. 前 K 个高频元素

day12--150. 逆波兰表达式求值+239. 滑动窗口最大值+ 347. 前 K 个高频元素

一、150. 逆波兰表达式求值 题目链接：https://leetcode.cn/problems/evaluate-reverse-polish-notation/description/ 文章讲解：https://programmercarl.com/0150.%E9%80%86%E6%B3%A2%E5%85%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%B1%82%E5
阅读更多...
奋战杭电ACM（DAY12）1018

奋战杭电ACM（DAY12）1018

又是一道数学题，用对数求位数 Big Number #include <iostream>#include <cmath>using namespace std;int main(){int n,m;double sum,digit;while(cin >> n){while(n>=1){cin >> m;sum=0;for(int i=1; i<=m; i++){digit=lo
阅读更多...
SQL进阶day12——高级条件语句

SQL进阶day12——高级条件语句

1筛选限定昵称成就值活跃日期的用户 我的代码：答案不对 select uid,u.nick_name,u.achievementfrom exam_record er join practice_record prusing(uid) join user_info u using(uid) where u.nick_name like "牛客%号" and u.achieveme
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2