<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<div>我是{{name}},
今年{{age}}岁。
</div>
<button v-on:click="plus">加1</button>
<!-- 绑定属性 -->
<a v-bind:href="link">百度一下</a>
<div>
<!-- v-bind指令简写 冒号: -->
<button :disabled="distrue">我是true</button>
<!-- 渲染属性值为布尔值时 ， 为true才会渲染，为false 属性被移除 -->
<button :disabled="disfalse">我是false</button>
</div>
<div>
<!-- vue 支持数据简单运算 ，支持JavaScript的表达式 -->
<!-- 加减乘除运算 -->
<div>{{num1+3}}</div>
<!-- 三元运算符 -->
<div>{{distrue? 'yes' :'no'}}</div>
<!-- 字符串拼接 -->
<div>
<a :href=" 'https://' + host">百度一下</a>
</div>
<!-- vue指令 -->
<div>
<!-- 1 v-text 指令用于更新标签包含的文本 ,与{{msg}} 作用相同， 所以可以直接用大括号形式 -->
<p v-text="msg"></p>
</div>
<!-- 渲染 2 v-html 。防止将strong不能识别为标签，而是以普通的字符串解析 -->
<div v-html="gender"></div>
<!-- 3v-show 指令的取值为true/false，分别对应着显示/隐藏 -->
<div>
<div v-show="show1">我是true ，show</div>
<!-- 状态为display：none状态 -->
<div v-show="show2">我是false ， show</div>
</div>
<!-- 4v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来 -->
<div>
<div v-if="ifone">我是true</div>
<!-- v-if 为false状态的时候，不是display：none状态，而是标签根本不会被渲染 -->
<div v-if="iftwo">我是false 注意注释的解释</div>
<div>
<!-- 如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if -->
</div>
</div>
<!-- 5 v-else 指令 要有兄弟节点 v-if -->
<div>
<p v-if="if_2">我是if</p>
<p v-else>我是else</p>
<!-- if和else只能出现一个 。如果v-if 是true被渲染了。else不会出现，如果 v-if为false ，那么只会出现 v-else这个p的渲染 不会出现第一个p ，渲染结果 我是else -->
</div>
<!-- 6 v-for 列表渲染 listone数组渲染-->
<div>
<div v-for="item in listone">{{item}}</div>
</div>
<!-- v-for 获取索引+ 数据渲染 提醒：v-for指令除了可以迭代数组，还可以迭代对象和整数。 -->
<div>
<div v-for="(item,index) in listone">
{{index}}.{{item}}
</div>
</div>
<!-- 7 v-bind 它用于动态绑定DOM元素的属性，比较常见的比如：<a>标签的href属性，<img/>标签的src属性。 -->
<div>
<a v-bind:href="link">百度官网1</a>
<!-- 两种写法均可 推荐第二种 -->
<a :href="link">百度官网2</a>
</div>
<!--8 v-on 指令相当于绑定事件的监听器，绑定的事件触发了 -->
<div>
<button v-on:click="say">点击说hello</button>
<button @click="sayone('tom')">点击是tom</button>
</div>
<!-- 9 v-model 双向数据绑定 -->
<div>
<input type="text" v-model="tbnum">
<p>同步数据是 ：{{tbnum}}</p>
</div>
<!-- 10 v-once指令 特点只渲染一次。后面元素数据再变化 都不会被渲染。 -->
<div>
<input type="text" v-model="oncenum">
<!-- 默认是data中的123 。 再次修改input ，p的值不会被更改 -->
<p v-once>渲染一次的数据是 {{oncenum}}</p>
</div>
<div>
<div>
<h1>组件标题</h1>
<span>
组件时间 2018年7月16日
</span>
<span>原创</span>
</div>
</div>
<div>
<zujian></zujian>
<zujian></zujian>
</div>
<!-- 组件2 ，数据渲染 -->
<div>
<!-- 你可以把detail理解成一个形参，zujian相当于实参。 -->
<my-zujian :detail="zujian2"></my-zujian>
<my-zujian :detail="zujian2"></my-zujian>
</div>
<!-- 组件3 数据较多 v-for渲染 -->
<div>
<my-zujian3
v-for="item in zujians"
:detail3="item">
</my-zujian3>
</div>
</div>
</div>
</body>
<script>
Vue.component('zujian',{
template:`
<div>
<h1>组件标题</h1>
<span>
组件时间 2018年7月16日
</span>
<span>原创</span>
</div>`
}),
Vue.component('my-zujian',{
props:['detail'],
template:`
<div>
<h1>{{detail.title}}</h1>
<span>
{{detail.date}}
</span>
<span v-show="detail.isyc" >原创</span>
<div>
<a :href="detail.zjlink">百度一下</a>
</div>
</div>`
}),
Vue.component('my-zujian3',{
props:['detail3'],
template:`
<div>
<h1>{{detail3.title}}</h1>
<span>
{{detail3.date}}
</span>
<span v-show="detail3.isyc" >原创</span>
<div>
<a :href="detail3.zjlink">百度一下</a>
</div>
</div>`
})
let vm= new Vue({
el:"#app",
data:{
name:"zhangsan",
age:'21',
num1:1,
num2:2,
gender:"<strong>性别</strong>",
link:"https://www.baidu.com",
distrue:true,
disfalse:false,
host:'www.baidu.com',
msg:'hello,vue',
show1:true,
show2:false,
ifone:true,
iftwo:false,
if_1:true,
if_2:false,
listone:['tom' ,'john' ,'lisa'],
tbnum:'',
oncenum:'123',
zujian:{
title:'组件标题11111111',
date:"2018年07月16日",
isyc:true,
zujink:"http://www.baidu.com"
},
zujian2:{
title:'组件标题22222222',
date:"2018年07月20日",
isyc:true,
zjlink:"http://www.baidu.com",
},
zujians:[
{
title:'组件标题01',
date:"2018年07月20日",
isyc:true,
zjlink:"http://www.baidu.com",
},
{
title:'组件标题02',
date:"2018年07月20日",
isyc:true,
zjlink:"http://www.baidu.com",
},
{
title:'组件标题03',
date:"2018年07月20日",
isyc:true,
zjlink:"http://www.baidu.com",
},{
title:'组件标题04',
date:"2018年07月20日",
isyc:true,
zjlink:"http://www.baidu.com",
}
]
},
computed:{ //属性
sum(){
return this.num1 +this.num2
}
},
methods:{ //方法
plus(){
return this.age++;
},
say(){
console.log("已经点击，hello");
},
sayone(name){
console.log('点击是' + name);
}
},
watch:{
age(){
console.log("有变化了" +this.age)
}
},
/**
生命周期 （8个阶段）
beforeCreate创建前--
created 成功创建 --
beforeMount 挂载之前--
mounted成功挂载--
beforeUpdate更新之前 --
updated成功更新 --
beforeDestroy销毁之前 --
destroyed成功销毁
*/
beforeCreate(){
console.log('即将创建');//el和data 都是undefined
},
created(){
console.log("创建完毕"); //data 有了 el 是undefined 证明dom 未生成
},
beforeMount(){
console.log("即将挂载");// 有节点，数据未渲染 。数据依然是{{name}}状态
},
mounted(){
console.log("挂载完毕"); //数据成功渲染 <div id="app"> zhangsan</div>
},
beforeUpdate(){
console.log("修改vuedata ，即将渲染") // app.name="lisi" ，目前的name值还是为name:"zhangsan",视图并未重新渲染更新。
},
updated(){
console.log("更新成功");//app.name="lisi" ,目前name的值 name"lisi", 视图已经更新
},
beforeDestroy(){
console.log("销毁当前组件，销毁前， 会触发 beforeDestroy钩子")
},
destroyed(){
console.log("销毁成功 ， 实例与其他实例关联被清楚， 它与视图之间也被解绑")
//app.name="lisi",name更新为李四， 如果app.$destroyed();则被销毁，app.nam="wangwu",则name依然为lisi，不会变为wangwu
},
actived(){
console.log(
"keep-alive组件呗激活的时候使用"
)
},
deactivated(){
console.log("keep-alive 组件停用时调用" )
}
})
</script>
</html>