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,在对应位置展示数据：DOM
document.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>
<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>
<script src="vue/vue.js">script>
head>
<body>
<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}}
<input type="text" v-model="addr"/>
<h1>你好:{
{nick}}h1>
<input type="text" v-model="nick"/>
<p v-if="person.age > 18">成年人p>
<p v-show="person.age > 18">成年人p>
<p v-if="person.age<10">儿童p>
<p v-else-if="person.age>18">成年人p>
<p v-else>青年p>
<ol>
<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>
<button v-on:dblclick="fun()">双击按钮button>
div>
<script>
new Vue({
el:"#app", //挂载点
methods:{
//创建函数
fun(){
console.log(1);
}
}
})
script>
body>
html>