cgb2108-day12

本文主要是介绍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>