学习笔记
简单的上vue就是一个框架，是一套构建在用户界面上的渐进式框架，vue的使用类似于jQuery的使用，直接引入vue库文件
二，vue的基础命令
1.vue的简单实例
<div id="app">
<ul>
<li>{{msg}}</li> <!-- // 页面显示 123456 -->
<li>{{sum}}</li> <!-- // 页面显示 name:'张三',age:18 -->
<li>{{sex()}}</li> <!-- // 浏览器显示 男 -->
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({ // new Vue 是创建Vue实例
el:'#app', //el是声明数据放在哪个地方使用（不能以html，和body为父级）
data:{ // data 里面专门方变量的
msg:'123456',
sum:{name:'张三',age:18}
},
methods:{ //methods 里面专门放函数的
sex:function(){
console.log('男');
}
},
directives:{ //局部指令注册 注册局部指令的
s:function(){
}
},
filters:{ //过滤器 允许你自定义过滤器，可被用于一些常见的文本格式化 过滤器的接收的值是要过来的内容
//{{ msg | cap}} 这是过滤器的使用 | return返回
cap:function(value){
if(value == 10){
return value = 10;
}
}
},
computed:{ //计算属性 但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
// {{cunot}}
cunot:function(){
return this.a +this.b
}
},
watch:{ //侦听属性 侦听属性的变化
msg:function(){
this.num = this.msg + this.a
}
}
});
</script>
2.Vue的指令
（1）插值对 {{数据}}
<li>{{son}}</li> //插值对
（2）v-cloak 防止页面加载时出现闪烁问题（在使用插值对的时候会出现闪烁，在标签上加 v-cloak 防止闪烁）
<li v-cloak>{{row}}</li> //防止插值对闪烁
（3）v-text 渲染数据的 ， 不能解析 html 标签
<li v-text="num"></li>//渲染数据 ，不支持解析html标签
（4）v-html 渲染数据的 ， 可以解析 html标签
<li v-html="num"></li>//渲染数据 ， 支持解析html标签
（5）v-pre 跳过编译过程 ， 页面上写什么显示就是什么
<li v-pre>{{row}}</li> //跳过编译， 页面上写什么，就显示什么
（6）v-once 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<li v-once >{{son}}</li> //只执行一个编译，后面son的值改变也不会编译了
（7）v-model 双休绑定 ，当数据发生变化的时候，视图也就发生变化
<li> <input type="text " v-model="rows" />{{rows}} </li> //双休绑定，通常用于 input select textarea 等标签
（8） 条件渲染 v-if v-esle-if v-show 显示
<li v-text="num+'a'" v-if="rows == 0">a</li> //条件判断
<li v-html="num+'b'" v-else-if="rows == 1">b</li>
<li v-html="num+'c'" v-else-if="rows == 2">c</li>
<li v-html="num+'d'" v-else>d</li>
<li v-show="r">{{num}}</li>
（9）列表渲染 v-for 循环数据 对象
<li v-for="r in row">{{r}}</li> //循环渲染数据
<li v-for="(r,x) in row">{{r}}----{{x}}</li> // 值和键
<li v-for="r,x in row">{{r}}----{{x}}</li>
<li v-for="v in rs">{{v}}</li>
<li v-for="v,x in rs">{{v}}--{{x}}</li>
（10）绑定点击事件 v-on： @
<li v-on:click="sex">点击我</li> //绑定事件
<li @click="sex">点击我</li>//绑定事件的简写
（11）绑定元素内联样式，（calss ， src ，style 都可以）v-bind: :
<li v-text="num" v-bind:class="r1"></li>//元素内链样式
<li v-text="num" :class=" r ?r1 : '' "></li>//元素内链样式的简写
（12）监听数据变化 vm.$watch('监听变量'，function（）{})
vm.$watch('num',function(newval,loaval){
console.log(newval,loaval,123456)
(14) 全局组件注册 Vue.component（'名称'，{}）；
（15）局部组件注册 在Vue实例下面创建 components：{组件名称：{}}
（16）单文件组件注册 一脸懵逼中
