Vue.js 是什么
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
简单的声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
//html
<div id="app">
{{ message }}
</div>
// js
var app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})
//结果
Hello Vue
Vue安装
- 我使用的开发软件是JetBrains WebStorm
- 利用cmd命令行安装淘宝镜像cnmp
- 然后命令行工具(CLI)
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目,my-project为你的项目名字
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
Vue.js组件中最重要的选项
data:vue对象的数据
methods:vue对象的方法
watch:监听
Vue.js数据渲染
v-text:格式处理了html,渲染数据
v-html:保存了html的结构
模板指令(条件与循环)
v-if:控制切换一个元素时候显示或者隐藏
v-show:通过css内部来控制显示或隐藏
//v-if 示例 html
<div id="app-3">
<p v-if="seen">显示了吗?</p>
</div>
//js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
//结果
显示了吗?
渲染循环列表
v-for:可以绑定数组的数据来渲染一个项目列表
//v-for示例 html
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
//js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
]
}
})
//结果
1。学习 JavaScript
2。学习 Vue
事件绑定
//事件监听器
1,v-on:click
2,@onclick (简写)
//v-on:click示例
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
//js
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
btnclick: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
//结果
Hello Vue.js! 点击逆转消息按钮显示 -> !sj.euV olleH
属性绑定
v-bind:将这个元素节点的属性和Vue实例保持一致
//v-bind示例
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
//结果
鼠标悬停几秒钟查看此处动态绑定的提示信息!
双向绑定
v-model:它能轻松实现表单输入和应用状态之间的双向绑定。
//v-model示例 -html
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
//结果
Hello Vue!