学习时是正好用的django所以直接在django环境下使用了，所以一开始就出现了小问题
在Django中引入了vue，但是demo中不能读取message，问题出在“{{ }}”这个符号，原因是Django的模板系统会默认接管{{ }}中间的变量， 跟Vue.js就冲突了。 把需要用到{{ }}的地方用模板标记：
{% verbatim %} {{ message }} {% endverbatim %}
包裹起来就好了。
这个有点坑。
入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/vue.js"></script>
</head>
<body>
<div id="app">
{% verbatim %}
<h1>site:{{ site }}</h1>
<h1>url:{{ url }}</h1>
<h1>{{ details() }}</h1>
{% endverbatim %}
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
site:'黄永鹏',
url:'http://www.baidu.com',
},
methods:{
details:function () {
return this.site +"- 前进。"
}
}
})
</script>
</html>
它的数据绑定形式和django以及flask中的jinja2的语法很相似都是用双括号来实现的。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。
可以通过v-html来输出html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/vue.js"></script>
</head>
<body>
{% verbatim %}
<div id="app">
<div v-html="hh"></div>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el:'#app',
data:{
hh:'你好，再见',
}
})
</script>
</html>
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/vue.js"></script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
</head>
<body>
{% verbatim %}
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
v-bind:class 指令
</div>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>
</html>
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/vue.js"></script>
</head>
<body>
{% verbatim %}
<div id="app">
{{5+5}}<br>
{{ ok ? 'huang' : 'yong' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">奋斗中</div>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'huangyong',
id : 1
}
})
</script>
</html>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
<div id="app">
<pre><a v-bind:href="url">huangyongpeng</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
}
})
</script>
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">...</a>
修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello，world!'
}
})
</script>
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
过滤器
vue的过滤器和django以及flask中模板的过滤器一样：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'huang'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
v-if,v-else和v-show
<body>
{% verbatim %}
<div id="app">
<div v-if="isLogin">你好，黄永鹏</div>
<div v-else>请您先登录</div>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
isLogin:true,
}
})
</script>
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-show和v-if效果差不多，不够v-show是控制display的属性，而v-if是判断是否加载，科技减轻服务器的压力，在需要的时候加载。
v-for循环指令
循环使用 v-for 指令。
先来一个最简单的使用
<body>
{% verbatim %}
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
items:[53,26,88,10,22,45,2]
}
})
</script>
改进下对数字进行排序输出：
<body>
{% verbatim %}
<div id="app">
<ul>
<li v-for="item in sortItems">{{ item }}</li>
</ul>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
items:[53,26,88,10,22,45,2]
},
computed:{
sortItems:function () {
return this.items.sort(sortNumber);
}
}
});
function sortNumber(a,b) {
return a-b;
}
</script>
computed是让data数据在循环前，执行相应的计算操作，这儿就是执行的排序操作，不过自己还得写个排序函数，因为js它的排序有缺陷。
<body>
{% verbatim %}
<div id="app">
<ul>
<li v-for="item in sortItems">{{ item }}</li>
</ul>
<hr>
<ul>
<li v-for="(student,index) in sortStudents">{{ index+1 }}:{{ student.name }}-{{ student.age }}</li>
</ul>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
items:[53,26,88,10,22,45,2],
students:[
{name:'huang',age:23},
{name:'yong',age:25},
{name:'peng',age:18},
{name:'haohao',age:30},
]
},
computed:{
sortItems:function () {
return this.items.sort(sortNumber);
},
sortStudents:function () {
return sortByKey(this.students,'age');
}
}
});
function sortNumber(a,b) {
return a-b;
}
//数组对象方法排序
function sortByKey(array,key) {
return array.sort(function (a,b) {
var x = a[key];
var y = b[key];
return ((x<y)?-1:((x>y)?1:0));
})
}
</script>
v-on事件监听
事件监听可以使用 v-on 指令:
<body>
{% verbatim %}
<div id="app">
本厂比赛得分：{{ score }}
<p>
<button v-on:click="add">加分</button>
<button @click="drop">减分</button>
<br>
<input type="text" v-on:keyup.enter="onEnter" v-model="score2">
</p>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
score:0,
score2:1
},
methods:{
add:function () {
this.score++;
},
drop:function () {
this.score--;
},
onEnter:function () {
this.score = this.score + parseInt(this.score2);
}
}
});
</script>
v-model数据源绑定
双向数据绑定
<body>
{% verbatim %}
<div id="app">
<p>{{ message }}</p>
<p><input type="text" v-model="message"></p>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
message:'哈哈'
},
});
</script>
v-model有三个修饰符，首先一个lazy，它不会立即更新它延缓了更新速度，会在鼠标焦点离开文本框时更新数据。
第二个是number，它是指数据必须是数字。
第三个是trim，它用来去空格，自动过滤用户输入的首尾空格。
<body>
{% verbatim %}
<div id="app">
<p>{{ message }}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>
<p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
<p>v-model.number:<input type="text" v-model.number="message"></p>
<p>v-model.trim:<input type="text" v-model.trim="message"></p>
<hr>
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
<hr>
<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{ isTrue }}</label>
<hr>
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="huang" value="huang" v-model="web_names">
<label for="isTrue">huang</label>
<input type="checkbox" id="yong" value="yong" v-model="web_names">
<label for="isTrue">yong</label>
<input type="checkbox" id="peng" value="peng" v-model="web_names">
<label for="isTrue">peng</label>
</p>
<p>{{ web_names }}</p>
<hr>
<h3>单选框的绑定</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>你选择的性别是：{{ sex }}</p>
</p>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
message:'2222',
isTrue:true,
web_names:[],
sex:''
},
});
</script>
v-bind标签属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/vue.js"></script>
<style>
.classA{
color: red;
}
.classB{
font-size: 150%;
}
</style>
</head>
<body>
{% verbatim %}
<div id="app">
<img v-bind:src="imgSrc" width="200px">
<a :href="baiduUrl" target="_blank">百度</a>
<div :class="className">1.绑定class</div>
<div :class="{classA:isOk}">2.绑定class中的判断</div>
<div :class="[classA,classB]">3.绑定class中的数组</div>
<div :class="isOk?classA:classB">4.绑定class中的三元运算符</div>
<hr>
<div>
<input type="checkbox" id="isOk" v-model="isOk">
<label for="isOk">isOk={{ isOk }}</label>
</div>
<hr>
<div :style="{color:red,fontSize:font}">5.绑定style</div>
<div :style="styleObject">6.绑定对象style</div>
</div>
{% endverbatim %}
</body>
<script>
new Vue({
el: '#app',
data: {
imgSrc:'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',
baiduUrl:'http://www.baidu.com',
className:'classA',
isOk:true,
classA:'classA',
classB:'classB',
red:'red',
font:'20px',
styleObject:{
color:'yellow',
fontSize:'30px'
}
},
});
</script>
v-pre
v-pre就是使你的代码原样输出，不对{{}}进行渲染。
v-cloak
v-cloak是在渲染完成后，才让内容显示。
v-once
v-once只进行一次渲染,后续改变是不会跟着改变的。