Vue学习笔记

v\ue与jquery的区别

• jquery是基于操作dom的库
• vue框架是以数据驱动和组件化开发为核心的，让用户不再操作DOM元素，让我们有更多时间关注业务逻辑

常用的指令

• 指令：
  在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。 譬如在HTML页面中这样使用
  
  在vue中v-xxx就是vue的指令 指令就是以数据去驱动DOM行为的,简化DOM操作
• 常见指令

- {
  {}} 插值表达式 
- v-cloak 能够解决插值表达式闪烁的问题
- v-text 不可解析html标签 
- v-text会覆盖元素中原来的内容，但是差值表达式只会替换自己的占位符，不会把整个元素内容清空。
- v-html 可解析html标签 
<style>
    [v-cloak] {
    
        sisplay: none;
    }
</style>
<span v-text="msg">||</span>
<!-- 和下面的一样 -->
<span v-clock>|{
  {msg}}|</span>
<p v-html="htmlmsg"></p>
<script>
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            msg: 'msg'
            htmlmsg： '<span>msg</span>'
        }
    });
</script>

结果：
	msg
    |msg|
	msg

- v-if 做元素的插入（append）和移除（remove）操作 
- v-else-if 
- v-else 
- v-show display:none 和display：block的切换 
- v-for 数组 item，index 对象 value，key ，index


<!--测试v-if  v-else-if  v-else-->
<button v-if='num==1'>测试v-if</button>
<button v-else-if='num==2'>测试v-else-if</button>
<button v-else>测试v-else</button>

<!--测试v-show-->
<div v-show='checkshow'>我是V-SHOW</div>
<!--循环数组-->
<ul>
    <li v-for='(item,index) in arrayfor'>
        {
  { item }}-{
  {index}}
    </li>
</ul>
<ul>
    <!--循环对象-->
    <li v-for='(oj,key) in ojfor'>
        {
  {key}}:{
  {oj}}
    </li>
</ul>

<script>
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            num: 1,
            checkshow:true,
            arrayfor:['篮球','足球','乒乓球'],
            ojfor:{
    play:'篮球',people:'ming',age:'19'}
        }
    });
</script>

- v-bind是vue提供的用于绑定html属性的指令，html中常见的属性有:id,class,src,title,style等
- v-bind的缩写：可以不写“v-bind”只留属性名称前面的冒号即可

<div>
    <img v-bind:src="path" style="width: 100px;height: 100px"/>
    <!-- 缩写 -->
    <img :src="path" style="width: 100px;height: 100px"/>
    
    <div :class="{ red: isRed }"></div>