1.声明式渲染
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???????<script src="../vue.js"></script></head><body><div id="app-2"> ???<span v-bind:title="message"> ???????鼠标悬停几秒钟查看此处动态绑定的提示信息！ ???</span></div></body><script> ???var app2 = new Vue({ ???????el:‘#app-2‘, ???????data:{ ???????????message:‘页面加载于‘ + new Date().toLocaleString() ???????} ???})</script></html>2.v-if判断是否显示
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="../vue.js"></script></head><body> ???<div id="app-3"> ???????<p v-if="seen">现在你看到我了</p> ???</div></body><script> ???var app3 = new Vue({ ???????el:‘#app-3‘, ???????data:{ ???????????seen:true ???????} ???})// ???app3.seen=false</script></html>3.v-for遍历渲染
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???????<script src="../vue.js"></script></head><body><div id="app-4"> ???<ol> ???????<li v-for="todo in todos"> ???????????{{todo.text}} ???????</li> ???</ol></div></body><script> ???var app4 = new Vue({ ???????el:‘#app-4‘, ???????data:{ ???????????todos:[ ???????????????{text:‘学习JavaScript‘}, ???????????????{text:‘学习Vue‘}, ???????????????{text:‘学习Flask‘} ???????????] ???????} ???}) ???app4.todos.push({ text: ‘新项目‘ })</script></html>4.v-on事件翻转字符串
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???????????<script src="../vue.js"></script></head><body> ???<div id="app-5"> ???????<p>{{message}}</p> ???????<button v-on:click="reverseMessage">逆转消息</button> ???</div></body><script> ???var app5 = new Vue({ ???????el:‘#app-5‘, ???????data:{ ???????????message:‘hello Vue.js‘ ???????}, ???????methods:{ ???????????reverseMessage:function () { ???????????????//逆转消息 ???????????????this.message = this.message.split(‘‘).reverse().join(‘‘) ???????????} ???????} ???})</script></html>5.v-model处理用户输入数据
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???????????????<script src="../vue.js"></script></head><body><div id="app-6"> ???<p>{{message}}</p> ???<input v-model="message"></div></body><script> ???var app6 = new Vue({ ???????el:‘#app-6‘, ???????data:{ ???????????message:‘hello Vue!‘ ???????} ???})</script></html>6.v-bind处理标签属性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="../vue.js"></script></head><body><div id="app-7"> ???<ol> ???<todo-item ???????????????v-for="item in groceryList" ??????????????v-bind:key="item.id" ???????????????v-bind:todo="item" ??????????????> ???</todo-item></ol></div></body><script> ???Vue.component(‘todo-item‘, { ???????props: [‘todo‘,‘key‘], ???????template: ‘<li>{{todo.text}}</li> ‘ ???}); ???var app7 = new Vue({ ???????el:‘#app-7‘, ???????data:{ ???????????groceryList:[ ???????????????{id:0,text:‘蔬菜‘}, ???????????????{id:1,text:‘水果‘}, ???????????????{id:2,text:‘肉类‘}, ???????????] ???????} ???})</script></html>Vue.js的初步使用
原文地址：https://www.cnblogs.com/ldq1996/p/8371114.html