还是不说废话了，直接上菜吧 
vue中常见问题
vue中isNaN()：判断是否不是一个数字（逻辑有点绕 
）
vue可以用v-model实现input双向绑定，但小程序不行（可以用input内容改变事件来实现实时监听即双向绑定）
原生js及jquery开发时，渲染页面可以用jsRender（模板渲染），不用自己拼接html代码
但这样的渲染方式，不管数据更新多少，都会全部重新拼接渲染
筛选查找 array.filter(m=>m.xxx.includes("*"))，这个在之前分享的笔记中涉及过
includes类似于c#的包含，同样需要注意数据类型统一的问题
vue实体搭建与指令详解
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app" v-cloak>
<!--有渲染延迟，建议配合v-cloak使用(渲染完再显示)-->
<!--插值表达式-->
<p>{{message}}</p>
<!--v-text 不解析文本中的html标签，会覆盖掉所在标签的所有内容-->
<p v-text="message">v-text</p>
<!--v-html 解析文本中的html标签，会覆盖掉所在标签的所有内容-->
<p v-html="html">v-html</p>
<!--v-bind: 绑定属性 可省略写成冒号：即可-->
<!--使用属性绑定后，双引号内为语法区域，如需要显示字符串，在双引号内用单引号-->
<input type="text" v-bind:placeholder="placeholder">
<input type="text" :placeholder="placeholder" :value="value">
<!--v-on: 绑定事件 可省略写成@即可-->
<input type="button" value="button" v-on:click="clickMe">
<input type="text" @change="clickMe">
<!--v-model 双向绑定 只能绑定value属性-->
<input type="text" v-model="msg">
<!--绑定样式-->
<input type="text" :class="['class1','class2']">
<!--三元表达式-->
<input type="text" :class="['class1',show?'class2':'']">
<!--数组嵌套-->
<input type="text" :class="['class1',{'class2':show}]">
<!--行内样式 键值对数据格式（json格式）-->
<input type="text" :style="{'background-color':'black','color':'red'}">
<input type="text" :style="[style1,style2]">
<!--v-if 会销毁html,适合于变动频率较低-->
<div v-if="show"><v-if/div>
<!--v-show 不会销毁html,仅隐藏,适合于变动频率较高-->
<div v-show="show">v-show</div>
<!--v-for 循环-->
<div v-for="id in arryIds">{{id}}</div>
<div v-for="(u,i) in userList" :key="u.id">{{i}} -- {{u.id}} -- {{u.name}}</div>
<div v-for="(value,key,index) in user">{{value}} -- {{key}} -- {{index}}</div>
<div v-for="item in 5">{{item}}</div>
</div>
</body>
</html>
<script>
setTimeout(function () { //模拟渲染延迟
var vm = new Vue({
el: "#app",
data: {
message: "hello world",
html: "<b>html文本</b>",
placeholder: "placeholder",
value: "value",
msg: "msg",
show: false,
style1: { 'background-color': 'black' },
style2: { 'color': 'red' },
arryIds: [1, 2, 3, 4],
userList: [
{
id: 1,
name: 'Jan'
},
{
id: 2,
name: 'Ben'
}
],
user: {
id: 1,
name: 'Jan'
},
},
methods: {
clickMe() {
alert("clickMe");
}
}
});
}, 500)
</script>
<style>
[v-cloak] {
display: none;
}
.class1 {
background-color: aqua;
}
.class2 {
color: blue;
}
</style>
