<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE介绍</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<h1>介绍</h1>
<h2>--------vue.js是什么--------</h2>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<h2>--------起步--------</h2>
<p>创建一个 .html 文件，然后通过如下方式引入 Vue：</p>
<pre><script src="https://cdn.jsdelivr.net/npm/vue"></script></pre>
<h2>--------声明式渲染--------</h2>
<p>Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：</p>
<b>eg:</b>
<div id="app">{{ message }}</div>
<script>
var app = new Vue({ //创建一个 Vue 实例
// 选项
el: '#app', //el:Vue实例挂载的元素节点.
/* 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。 */
data: { //数据.对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：
message : 'Hello Vue!'
}
})
</script>
<h3>绑定元素特性</h3>
<b>eg:</b>
<div id="app-2">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！<br></span>
<span>
<b>v-bind</b>指令,缩写":"<br>
指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
<a href="https://cn.vuejs.org/v2/api/#v-bind">官网解释v-bind</a>
</span>
</div>
<script>
var app2 = new Vue({
el: "#app-2",
data:{
message:'页面加载于'+new Date().toLocaleString()
}
})
</script>
<h2>--------条件与循环-------</h2>
<div id="app-3">
<h3>
控制切换一个元素是否显示 v-if
<button v-on:click="seen = !seen">Toggle</button>
</h3>
<span v-if="seen">现在你看到我了</span>
<transition name='fade'>
<p v-if="seen">过渡动画<a href="https://cn.vuejs.org/v2/guide/transitions.html">官方解释过渡动画及类名</a></p>
</transition>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data:{
seen:true
}
})
</script>
<style>
.fade-enter-active, .fade-leave-active {transition: opacity .5s; }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0; }
</style>
<div id="app-4">
<h3>绑定数组的数据来渲染一个项目列表 v-for<a href="https://cn.vuejs.org/v2/guide/#%E6%9D%A1%E4%BB%B6%E4%B8%8E%E5%BE%AA%E7%8E%AF">官方v-for简介示例</a></h3>
<ol>
<li v-for="item in items">{{item.text}}</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: "#app-4",
data:{
items:[
{text:"项目1"},
{text:"项目2"},
{text:"项目3"}
]
}
})
</script>
<h2>-------处理用户输入------</h2>
<div id="app-5">
<h3>交互<a href="https://cn.vuejs.org/v2/api/#v-on">v-on</a>缩写@</h3>
<p>v-on 指令添加一个事件监听器</p>
<p>{{message}}</p>
<button v-on:click="nizhuan">逆转消息v-on:click</button>
<button @click="nizhuan">逆转消息(缩写效果@click)</button>
</div>
<script>
var app5 = new Vue({
el:"#app-5",
data:{
message:'这是正序内容'
},
methods:{ //方法区，事件可以调取其中的方法
nizhuan:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<div id="app-6">
<h3>双向绑定(表单) <a href="https://cn.vuejs.org/v2/api/#v-model">v-model</a></h3>
<input v-model="message" placeholder="请输入内容">
<p>输入的内容是:{{message}}</p>
<label for="check"><input id="check" type="checkbox" v-model='checked'>同意协议</label>
<button :class="{tongyi:checked}" :disabled="!checked">{{tongyiTxt}}</button>
<button :class="[checked ? 'tongyi' : 'tongyi-no', 'btn']" :disabled="!checked">{{tongyiTxt}}</button>
</div>
<script>
var app6 = new Vue({
el:"#app-6",
data:{
message:'',
checked:false,
tongyiTxt:"立即注册"
}
})
</script>
<style>
.tongyi{
background: green;
color: #FFF;
}
.errorClass{
}
</style>
</body>
</html>
