近期项目的前端页面准备引入Vue.js，看了网上一些简介，及它和JQuery的对比，发现对于新入门的前端开发来说，Vue 其实也是比较适用的一个框架，其实用性不比JQuery差，感觉还挺有意思，于是研究了
<html>
<head>
<title>Vue testtitle>
head>
<body>
<div id="app">
<p>{{ message }}p>
div>
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
span>
div>
<div id="app-3">
<p v-if="seen">Now you see mep>
div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>
<div id="app-4_2">
<ul>
<li v-for="todo in todos">
{{ todo }}
li>
ul>
div>
<div id="app-5">
<p>{{ message }}p>
<button v-on:click='reverseMessage'>reverse buttonbutton>
div>
<div id="app-6">
<p>{{ message }}p>
<input v-model='message'>
div>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item">todo-item>
ol>
div>
<div id="app-7_2">
<ul>
<todo-text v-for="item in textInfoList" v-bind:todo="item">todo-text>
ul>
div>
<script src="./vue.min.js">script>
<script>
// 静态数据绑定
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
// 动态属性值绑定
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})
// 控制标签是否显示
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
// 遍历对象数组
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn Javascript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
// 直接遍历数组
var app4_2 = new Vue({
el: '#app-4_2',
data: {
todos: [
'Learn Javascript',
'Learn Vue',
'Build something awesome'
]
}
})
// 绑定一个逆排字符串的函数
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js.'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
// 同步用户输入
var app6 = new Vue({
el: '#app-6',
data: {
message: 'test text input.'
}
})
// 动态绑定数据到模板中的变量
Vue.component('todo-item', {
props: ['todo'],
template: '{{ todo.text }}'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
// 注意参数名 todo 及其类型 ['todo'] 都不能变
Vue.component('todo-text', {
props: ['todo'],
template: '{{ todo.line }} - {{ todo.text }}'
})
var app7_2 = new Vue({
el: '#app-7_2',
data: {
textInfoList: [
{
line: 'line one.' ,
text: 'textInfo'
},
{
line: 'line two.' ,
text: 'textInfo'
},
{
line: 'line three.' ,
text: 'textInfo'
}
]
}
})
script>
body>
html>
京公网安备 11010802041100号