vue知识点

1.三个框架 vue Angular React

vue相对于Angular、react来说是最容易学习的一种框架,vue由个人维护,它是华人尤雨溪创立的。vue的操作元素更方便,简化了DOM的操作。

2.vue的指令

指令1:

循环:v-for

当建立一个新的vue框架时,new Vue 这里vue要注意开头大写,在创建vue框架前要先创建一个选择器来承载,例如:id选择器、class选择器。。

例子1:数组循环
<div class="text">
    {{msg}}
     <ul>
         <li v-for='val in arr'>{{val}}</li>
     </ul>
 </div>
<script>
    new Vue({ //el  element的缩写  可以在Vue js里对dom元素进行更改
        el:'.text',//只要是选择器皆可  id选择器 class选择器 各种选择器
        data:{
            msg:'hello vue',
            arr:[1,2,3]
        }
    })
</script>
例子2:table表格
<div id='itany'>
   <table border='1' cellspacing='0'>
       <thead>
           <tr>
               <th>编号</th>
               <th>名称</th>
               <th>单价</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for="(value,index) in arr">
               <td>{{index+1}}</td>
               <td>{{value.pname}}</td>
               <td>{{value.price}}</td>
           </tr>
       </tbody>
   </table>
</div>
<script>
   new Vue({
       el:'#itany'
       data:{
           arr:[
               {pname:'香蕉',price:3},
               {pname:'苹果',price:2},
               {pname:'鸭梨',price:1}
           ]
       }
   })
</script>

指令2:

表单:v-model

v-model 双向数据绑定,一般用于表单元素 用法:v-model=''值''

例子:输入框内容与显示 同步
<script src="js/vue.js"></script>
<div id="itany">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>
<script>
    new Vue({
        el:'#itany',
        data:{
            msg:'hello vue'
        }
    })
</script>

指令3:

事件:v-on

v-on可以用来绑定一个事件 用法:v-on:事件名='函数名'

例子1:鼠标点击按钮 向控制台中输出
<div id='itany'>
   <button v-on:click='alt'>按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
  var vm=new Vue({
        el:'#itany',
        data:{
            msg:'hello'
        },
        methods:{
            alt:function(){
//                    alert(000)
//                    console.log(this.msg);
                console.log(vm.msg);
            }
        }
    })
</script>
例子2:鼠标点击 切换文字
<div id='itany'>
   <p>{{msg}}</p>
   <button v-on:click="chg">按钮</button>
   </div>
<script src='js/vue.js'></script>
<script>

   new Vue({
       el:'#itany',
       data:{
           msg:'hello word',
           txt:'hello vue'
       },
       methods:{
           chg:function(){
              this.msg=this.txt 
           }
       }
   })
</script>
例子3:鼠标点击 来回切换文字
<div id='itany'>
   <p>{{msg}}</p>
   <button v-on:click="chg">按钮</button>
 </div>
<script src='js/vue.js'></script>
<script>

   new Vue({
       el:'#itany',
       data:{
           msg:'hello word',
//               txt:'hello vue',
           flag:true
       },
       methods:{
           chg:function(){
//                  this.msg=this.txt 
               if(this.flag){
                   this.msg='hello vue',
                   this.flag=false    
               }else{
                   this.msg='hello word'
                   this.flag=true  
               }
               
           }
       }
   })
</script>

v-model、 v-on 应用

添加列表
<div id='itany'>
   <input type="text" v-model='txt'>  <button v-on:click='add'>添加</button>
   <ul>
       <li v-for="(value,index) in arr">
          {{value}}
          <button v-on:click='delt(index)'>删除</button>
       </li>
   </ul>
</div>
<script src='js/vue.js'></script>
<script>

   new Vue({
       el:'#itany',
       data:{
           arr:['吃饭','睡觉','打游戏'],
           txt:''
       },
       methods:{
           add:function(){
               this.arr.push(this.txt),
                this.txt=''
           },
           delt:function(ind){
               this.arr.splice(ind,1)
           }
       }
   })
</script>

指令4:

事件:v-bind

v-bind 是用来绑定属性的,它的用法是:v-bind:属性名='事件名'

例子1:点击切换图片(v-on v-bind应用)
<div id='itany'>
   <img v-bind:src="url" alt="" v-on:click='chg'>
</div>
<script src='js/vue.js'></script>
<script>
   new Vue({
       el:"#itany",
       data:{
           url:'img/1.jpg'
       },
       methods:{
           chg:function(){
               this.url='img/2.jpg'
           }
       }
   })
</script>
例子2:点击来回切换图片(v-on v-bind应用)
<script src='js/vue.js'></script>
<div id="itany">
    <img v-bind:src="url" v-on:click='alt' alt="">
</div>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'img/1.jpg',
            flag:true
        },
        methods:{
            alt:function(){
                if(this.flag){
                    this.url='img/2.jpg';
                    this.flag=false
                }else{
                    this.url='img/1.jpg';
                    this.flag=true
                }
            }
        }
    })
</script>
例子3:点击编号切换图片(v-for v-on v-bind应用)

head部分

<style>
    ul{
        overflow: hidden;
    }
    li{
        width:60px;
        border:1px solid #000;
        float:left;
        text-align: center;
        list-style: none;
    }
</style>

body部分

<div id='itany'>
   <img v-bind:src="url" alt="">
   <ul>
       <li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
   </ul>
</div>
<script src='js/vue.js'></script>
<script>
   new Vue({
       el:'#itany',
       data:{
           url:'img/1.jpg',
//               num:[1,2,3,4,5]
           list:['img/1.jpg','img/2.jpg','img/3.jpg']
       },
       methods:{
           chg:function(ind){
               this.url=this.list[ind]
           }
       }
   })
</script>

第二种写法
head部分

<style>
    ul li{
        float: left;
        list-style: none;
        padding: 5px 10px;
        border: 1px solid #000;
    }
</style>

body部分

<div id="itany">
   <img v-bind:src="url" alt="">
    <ul>
        <li v-for='(value,index) in arr' v-on:click='chg(index)'>{{index+1}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'img/1.jpg',
            arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
        },
        methods:{
            chg:function(ind){
                this.url=this.arr[ind]
            }
        }
    })
</script>

指令5:

事件:v-show

v-bind 可以控制元素的显示和隐藏,使用display:none;隐藏 用法:v-show=" "

例子1:隐藏
<div id="itany">
    <h1>hello world</h1>
    <h3 v-show="!see">hello vue</h3>
</div>
<script>
    new Vue({
        el:'#itany',
        data:{
            see:true
        }
    })
</script>
例子2:显示与隐藏

html部分

<style>
    #box{
        width: 100px;
        height: 100px;
        background: #54da6f;
    }
</style>

body部分

<script src="js/vue.js"></script>
<div id="itany">
    <button v-on:click='chg'>点击切换</button>
    <div id="box" v-show='see'></div>
</div>
<script>
    new Vue({
        el:'#itany',
        data:{
            see:true
        },
        methods:{
            chg:function(){
                this.see=!this.see;
            }
        }
    })
</script>

指令6:

事件:v-if

显示与隐藏 同v-show用法一样 使用visibility:hidden;删除 用法:v-if=" "必须和v-if连用 不能单独使用 否则报错

指令7:

事件:v-else

显示与隐藏 用法:v-else='' ''必须和v-if连用

指令8:

事件:v-else-if

用法:v-else='' ''必须和v-if连用

指令9:

事件:v-html

可以解析输入框内输入的标签(能读取html标签)可以双向绑定 用法:v-html=' '

<div id="app">
   <input type="text" v-model='msg'>
    <p v-html='msg'>{{msg}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
    })
</script>

指令10:

事件:v-text

可以解析文本 不能解析标签( v-text读取文本不能读取html标签)可以双向绑定 用法:v-text=' '

<div id="app">
   <input type="text" v-model='msg'>
    <h2 v-text='msg'>{{msg}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
    })
</script>

指令11:

事件:v-once

只绑定一次 只绑定最初的(就是 加载一次 如果用到事件中就是事件只执行一次)用法:直接写 (不需要表达式)

<div id='app'>
   <input type="text" v-model='msg'>
   <a href="" v-once>{{msg}}</a>
</div>
<script src='js/vue.js'></script>
<script>
   new Vue({
       el:'#app',
       data:{
           msg:'hello'
       }
   })
</script>

指令12:

事件:v-pre

原样输出 (把标签内部的元素原位输出) 用法:直接写 (不需要表达式)

<div id='app'>
   <input type="text" v-model='msg'>
   <h1 v-pre>{{msg}}</h1>
</div>
<script> 
   new Vue({
       el:'#app',
       data:{
           msg:'hello'
       }
   })
</script>
</body>
</html>

指令13:

事件:v-cloak

没有编译完不会显示 用法:直接写 (不需要表达式)要和[v-cloak]{display:none;}一起用
html部分

<style>
    [v-cloak]{
        display:none;
    }
</style>

body部分

<div id='app'>
   <h1 v-cloak>{{msg}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
   new Vue({
       el:'#app',
       data:{
           msg:'hello vue'
       },
       beforeMount:function(){
           alert('beforeMount')
       }
   })
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容