我们想做的，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;
  }
}

过滤器：

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

按键修饰符：

1
2
3

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

网络研习社系列文章：

　@lemooljiang #network-institute

This page is synchronized from the post: 我们想做的，vue都帮我们做好了 / 网络研习社#12

# cn, miniprogram, network-institute

Catalogue