第一步创建.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属性变成,元素显示出来。