内容提要:
vue.js安装、渲染数据到页面、条件控制和双向绑定。vue.js初体验。
目录
安装
渲染数据到页面
条件控制
调用方法和双向绑定
直接在HTML文件中引入vue对应的js即可实现vue相关功能。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
或者:
<script src="https://cdn.jsdelivr.net/npm/vue">script>
官方教程表示不推荐新手直接使用vue-cli,等熟悉node.js构建工具时再使用。所以此处没有vue-cli构建vue项目的方法。(该工具用于快速创建vue项目)
1.2渲染数据到页面方法一:声明式渲染
<html>
<head>
head>
<body>
<div id="app">
{{ message }}
div>
<script>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})script>
body>
html>
此时直接通过console修改app.message的值,页面也会同步更新。
方法二:动态绑定
<html><head>head><body><div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!span>div><script>var app2 = new Vue({el: '#app-2',data: {message: '页面加载于 ' + new Date().toLocaleString()
}
})script>body>html>
此时直接通过console修改app2.message的值,页面也会同步更新。(vue会忽略-)
1.3条件控制v-if语句
根据条件进行逻辑判断。
<div id="app-3">
<p v-if="seen">现在你看到我了p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})script>
v-for语句
用于循环处理某个数据。
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})script>
1.4调用方法和双向绑定
v-on
用于添加一个事件监听器,指定特定事件调用某个方法。
<div id="app-5">
<p>{{ message }}p>
<button v-on:click="reverseMessage">反转消息button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {this.message = this.message.split('').reverse().join('')
}
}
})script>
v-model
进行数据双向绑定,可以修改的同时进行展示。
<div id="app-6">
<p>{{ message }}p>
<input v-model="message">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})script>