我们想做的，vue都帮我们做好了 / 网络研习社#12

vue是一个相当火的前端，在前一篇中简略地体验了一下。它可以帮你做很多事情，清晰地规划日常事务。天天纠结于学哪种前端的朋友现在可以有一个简单的答案，那就是vue.js。

vue还可以和Django restframework来进行前后端分离的设计。这是我在做小程序时遇到的问题，现在倒是有了解决的办法。不过学习新方法确实也蛮头大的，快半月了，还只是一点点进展。这里做点小笔记，慢慢折腾。

常用表达式：

1、v-cloak 解决插值表达式的闪烁问题
<p v-cloak>{{ msg }}</p>
2、<p v-text='msg'></p>  / 渲染文本内容
3、<p v-html='msg2'></p>  / 渲染html内容
4、v-bind:title='mytitle'     /绑定变量属性
   语法简写形式：v-bind:title -> :title='mytitle'
5、v-on:click='show'  /绑定事件
  需要定义methods:{
show: function () {
alert(‘hello world’)
}
}
语法简写：v-on:click -> @click

v-model,双向数据绑定(与表单结合)：
v-model=’msg’
msg:’hello world

v-for：
遍历数组：<p v-for=’item in list’>{{item}}</p>
遍历对象：<p v-for= ‘(val, key) in user’>{{val}}—{{key}}</p>

v-if ,v-show：
<p v-if=’true’>显示出来</p>
v-if每次会重新生成和删除元素
<p v-show=’true’>显示出来</p>
v-show只是隐藏显示

事件修饰符：

.stop @click.stop=’show’   /可以阻止事件冒泡
.prevent  /阻止默认行为
.capture  /捕获触发事件
.self     /只有点击当前元素才触发
.once    /只触发一次

计算属性

所有的计算属性都是以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
computed:{
  show: function () {
    return show = true;
  }
}

过滤器：

Vue.filter(‘filtername’,function(data){}) 
{{ data | filtername}}

按键修饰符：

@keyup.enter=’function’
.enter
.tab

---

网络研习社系列文章：

• 微信小程序开发初体验 / 网络研习社#1
• 新技能：小程序空间当图床！ / 网络研习社#2
• 小程序云开发中数据的传递形式 / 网络研习社#3
• 如何突破coreldraw的网络限制 / 网络研习社#4
• 我师网小程序初发布，大家多多指教 / 网络研习社#5
• 用github 做文件目录 / 网络研习社#6
• LNMP环境一键安装（一） / 网络研习社#7
• LNMP环境自定义安装（二） / 网络研习社#8
• 利用github做免费博客 / 网络研习社#9
• Nodejs，打开服务器黑匣子 / 网络研习社#10
• 一入前端深似海，聊聊vue.js / 网络研习社#11

---

@lemooljiang #network-institute