基本概念
vue:用于构建用户界面的渐进式框架
区别:可以自底向上逐层应用
优势:
1>只关注视图层易于上手
2>便于和第三方库或已有项目整合
通过vue框架的使用，实现了数据和DOM的绑定，所有东西都是响应式的。
初次上手
环境搭建
vue的使用环境搭建有两种方式：
1>安装方式
安装步骤：https://cn.vuejs.org/v2/guide/installation.html
2>引用方式
鉴于初次接触vue采用较为简单的引用方式搭建环境
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
用模块语法声明式的将数据渲染到DOM中
<!--HTML-->
<div id="first">
{{message}}
</div>
<!--JS-->
<script>
var vm = new Vue({
el:'#first',
data:{
message:'hello vue!'
}
})
</script>
页面打印出hello vue!
vue通过声明一个Vue()对象使用
el：指明需要渲染的dom的id
data：将要渲染的数据
message：发送的消息
部分指令
1>v-bind
功能：为dom绑定一个消息
使用方法：v-bind:绑定对象=“消息”
<!--HTML-->
<div id="first" v-bind:title="message_2">
{{message}}
</div>
<!--JS-->
<script>
var vm = new Vue({
el:'#first',
data:{
message:'hello vue!',
message_2:'页面加载于：'+ new Date().toLocaleString()
}
})
</script>
鼠标悬停于hello vue!上显示出提示：消息页面加载于：XXXXXX
2>v-if
功能：为dom添加一个条件
使用方法：v-if=“消息”
<!--HTML-->
<div id="first" v-bind:title="message_2">
<span v-if="seen">
{{message}}
</span>
</div>
<!--JS-->
<script>
var vm = new Vue({
el:'#first',
data:{
message:'hello vue!',
message_2:'页面加载于：'+ new Date().toLocaleString(),
seen:1 //返回布尔值控制dom是否显示
}
})
</script>
通过改变seen的值控制hello vue!是否显示
3>v-for
功能：遍历一个数组循环渲染到dom中
使用方法：v-for=“元素 in 数组”
<!--HTML-->
<div id="first" v-bind:title="message_2">
<span v-if="seen">
{{message}}
</span>
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
<!--JS-->
<script>
var vm = new Vue({
el:'#first',
data:{
message:'hello vue!',
message_2:'页面加载于：'+ new Date().toLocaleString(),
seen:1, //返回布尔值控制dom是否显示
todos:[
{text:'第一个项目'},
{text:'第二个项目'},
{text:'第三个项目'},
{text:'第四个项目'}
]
}
})
</script>
用列表的形式打印出数组todos内容
4>v-on
功能：添加事件监听
使用方法：v-on:监听器=“消息”
<!--HTML-->
<div id="first" v-bind:title="message_2">
<span v-if="seen">{{message}}</span>
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
<button id="reverse" v-on:click="reversemessage">reverse</button>
<!--JS-->
<script>
var vm = new Vue({
el:'#first',
data:{
message:'hello vue!',
message_2:'页面加载于：'+ new Date().toLocaleString(),
seen:1, //返回布尔值控制dom是否显示
todos:[
{text:'第一个项目'},
{text:'第二个项目'},
{text:'第三个项目'},
{text:'第四个项目'}
]
}
})
var vm_r = new Vue({
el:'#reverse',
methods:{
reversemessage:function () {
vm.message = vm.message.split('').reverse().join('')
}
}
})
ps:split方法将字符串拆分为单个字符并存入数组；join方法将数组元素组成字符串。
通过点击按钮"reverse"将字符串hello vue!反转
methods：渲染方法
5>v-model
功能：实现表单输入和应用状态的双向绑定
使用方法：v-model:监听器=“消息”
<!--HTML-->
<div id="first">
<p>{{ message }}</p>
<input v-model="message">
</div>
<!--JS-->
var vm= new Vue({
el: '#first',
data: {
message: 'hello vue!'
}
})
输入框中默认文本为hello vue!且内容发生改变时，p标签中的内容同步改变。
失败案例：当使用v-model指令进行不在同一id下的表单和状态绑定时，绑定没有成功：
<!--HTML-->
<div id="second">
<p>{{message}}</p>
</div>
<input id="input_m" v-model="message">
<!--JS-->
<script>
var vm = new Vue({
el:'#second',
data:{
message:'hello vue!',
}
})
</script>
原因：v-model是vue所提供的一个语法糖，上述语句中的：
<input id="input_m" v-model="message">
是由下面代码所包装的语法糖：
<input id="input_m" v-bind:value="message"
v-on:input="message=$event.target.value">
而在此情况下应该如何实现双向绑定暂时还没有想到好的解决方案，望指正。