这是我参与更文挑战的第10天，活动详情查看： 更文挑战
1.Vue实现Hello World
当引入Vue.js时 会声明一个全局变量Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<!-- {{}}叫插值表达式 去调用data中对应的数据-->
<script>
var app = new Vue({//创建Vue的实例
el:'#app',//el:代表Vue实例负责管理的区域，'#app'是指让这个Vue实例接管id="app"的dom标签里的所有内容
data:{
content:'Hello World'//对应调用属于Vue实例下的{{content}}
}
})
</script>
</body>
</html
el：是说Vue实例的管辖范围，上面代表Vue接管了id为app的dom标签
data : 定义一些数据
案例 两秒后让Hello World 变为 Bye World
<script>
var app = new Vue({
el:'#app',
data:{
content:'Hello World'
}
})
setTimeout(function(){
app.$data.content='Bye World'
},2000)
</script>
el , data这种Vue实例中的属性都有前缀$ 以便与用户定义的变量进行区别
app.$data.content='Bye world';//就可以修改div中的内容了 其余一样
数据改变了，页面也会跟着改变
观察一个变量前后的变化的值的方法
app.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal);
})
2.Vue 语句
- v-on : 绑定事件 v-on:click='' 可以简写为 @click=''
- v-bind:index="index" 给元素属性赋值 v-bind:可以省略为:
2.1 v-if判断
显示隐藏信息
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
在控制台输入app3.seen=false，则之前显示的消息就消失了
2.2 v-for循环
Todolist
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
2.3 v-on事件监听
翻转消息
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
2.4 v-model 表单输入和应用双向绑定
双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
2.5 总结
todolist完整案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向传递，一变都变 -->
<input type="text" v-model="inputValue">
<!-- 只要button被点击就执行handleBtnClick方法 -->
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- 用v-for遍历数据list -->
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:['第一课的内容','第二课内容'],//被遍历到页面的数据
inputValue: ''
},
methods: {
handleBtnClick:function(){
this.list.push(this.inputValue),//点击后向list push当前输入框内容
this.inputValue=''//点击完后清空输入框
}
}
})
</script>
</body>
</html>
