第一步创建.html文件，通过以下方式引入VUE
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1.声明式渲染
做一个简单的案例
<div id="app">
{{ message }}
</div>
<cript>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。这里的new Vue是声明一个vue的实例化对象，el是用于挂载需要管理的元素，这里被挂载需要管理的是id为app的div，data里面放的就是页面存放的数据。
2.vue的第一个指令v-bind
<div id="app">
<!-- v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>: -->
<!-- <span v-bind:title="msg">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span> -->
<span :title="msg"><!-- 语法糖 -->
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data(){
return {
msg:'页面加载于 ' + new Date().toLocaleString()
}
}
})
</script>v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>:
3. v-if 条件循环
<div id="app">
<p v-if="seen">我是web2208示范班学员</p>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
seen:false
}
}
})
</script>这里seen是给v-if传的值，如果为true,p标签里面的内容就可以显示，如果seen为false，则p标签不会显示。
4. v-for指令
<!-- v-for for in-->
<div id="app">
<ul>
<!-- <li v-for="item in county">{{item}}</li> -->
<li v-for="item of county">{{item}}</li>
</ul>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return{
county:['中国','美国','德国','日本']
}
},
})
</script>这里data函数返回一个数组，v-for遍历这个数组，item是当前的值，运用到了ES6中的for in和for of遍历数组的方法。
5. v-on指令
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<div id="app">
<!-- v-on是监听 监听事件的变化 -->
<h1>{{num}}</h1>
<!-- <button type="button" v-on:click="add">增加</button> -->
<button type="button" @click="add()">增加</button>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
num:1
}
},
methods:{
/* add(){
this.num++
} */
add:function(){
this.num++
}
}
})
</script>
v-on是监听监听事件的变化，v-on：可以简写成@。其中add方法里面的this要加，因为this代表vue的实例 所有需要从data中拿的数据都要加this你才能拿到。
6.v-model指令
<div id="app">
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data(){
return {
msg:"我们都是很努力的人"
}
},
methods:{
}
})
</script>这里给表单加了v-model指令，也也赋了msg，从而使h2中的内容和input框中的内容一样实现表单输入和应用状态之间的双向绑定。
7.Mustache语法
<h3>{{message}}</h3> <!-- 这里就是直接输出message，message是可变的 -->
<h3>{{firstName}},wang</h3> <!-- 这里 firstName 可变， ，wang是固定的-->
<h3>{{firstName + lastName}}</h3> <!-- 这里是将两个变量拼接 -->
<h3>{{1+1}}</h3> <!-- 这里就是简单地运算 -->mustache（胡子语法） 语法，就是 双大括号 {{}}。
{{}} 里面可以写 变量 也可以写 表达式 ，也可以简单的运算。
8.v-once指令
<div id="app">
<h2 v-once>{{msg}}</h2>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg:'中国'
}
}
})
</script>v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。
9.v-html指令
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
url:"<a href='http://www.baidu.com'>百度一下</a>"
}
}
})
</script>如果没有v-html指令，那么渲染的就是字符串，在某些时候我们不希望直接输出这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。
10. v-text指令
<div id="app">
<h2 v-text="message">你也好</h2>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message: "你好啊"
}
}
})
</script>这里的h2标签里面的内容本来是“你也好”，但是加了v-text文本指令，所以h2的内容变成了message的值，变成“你好呀”。
11 . v-cloak指令
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{msg}}</h2>
</div>
<script src="../5.18 第一天/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg: "张三"
}
}
})
</script>有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到的这个标签。在vue解析之前，div属性中有这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性，加载完成之后，css属性变成，元素显示出来。
2093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
