vue的基本指令 - vue - php中文网博客

首页 > 博客列表 > vue的基本指令

博主信息

博文 37

粉丝 0

访问量 44329

专题推荐

更多>

Vue是什么？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，
Vue 也完全能够为复杂的单页应用提供驱动。

Vue基本使用

vue在html里的使用，有一个vue根节点，比如 div 。在div里所有的内容都可以用vue实例进行管理，数据表示形式{{变量}},

<div class="app">
<p>用户名:{{username}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//class=“app” 就是挂载点，vue可以操作其包裹的所有元素
const vm=new Vue({
//挂载点
el:'.app',
//数据注入
data:{
  username:'小红'，
}
})
</script>

怎么获取p标签里的内容？

vm.$data.username;即可获得
简写为：vm.username;直接改变p标签里的内容 vm.username=”小明”;

v-text,v-once,v-html指令

<p v-text="username"></p>
<p v-once="username"></p>
<p v-html="name"></p>
//以上这些跟<p>{{username}}</p>表现形式一样

v-once跟v-text一样，区别是v-once只能被渲染一次，
v-html能解析html元素

const vm=new Vue({
         //当前的vue的配置项
         //挂载点
         // 简写  el:document.querySelector('.app'),
         el:'.app',
         //数据注入
         data:{
           username:'小红',
           name:'<em style="color:red">刀郎</em>',
         }
});

绑定指令

v-bind,v-on

<p v-bind:style="style1">{{site}}</p>
//v-bind是高频指令，为了方便可以写成 ：冒号
<p :style="style1">{{site}}</p>
//v-on也是高频指令，可写成 @
//.prevent a标签的默认跳转行为
//.once 只执行一次
<p><a href="https://php.cn" v-on:click.prevent="show">显示网站名称</a></p>
<p><a href=""  @click.prevent.once="show">显示网站名称</a></p>
<script>
const vm=new Vue({
    //挂载点
    el:'.app',
    //数据注入
    data:{
     site:'门户网站'，
    //绑定属性
    style1:'color:red',
    }，
    //绑定事件
    methods:{
    show(){
    //this就是当前的vue实例
    alert(this.site);
}
}
})
</script>

绑定事件对象

<button @click="handle=($event,100,200)">click</button>
//事件对象的参数名必须是 $event
 const vm=new Vue({
         //当前的vue的配置项
         //挂载点
         // 简写  el:document.querySelector('.app'),
         el:'.app',
         //绑定事件
         methods:{
             handle(ev,a,b){
                 console.log(a,"+",b,"=",a+b);
             }
         }
       });

v-model双向绑定

<p>模型中的数据：{{site}}</p>
//$event表示事件对象
<p>双向绑定:<input type="text" :value="site" @input="site=$event.target.value"></p>
<script>
          const vm=new Vue({
             el:'.app',
             data:{
                site:'php中文网',
             },
          });
    </script>

这就是双向绑定，但这样太麻烦，有一个简便的指令v-model

<p>模型中的数据：{{site}}</p>
//.lazy 表示更新不频繁，除非按回车才改变
<p>双向绑定:<input type="text" v-model.lazy='site'></p>
//.number表示数字类型
<p><input type="text" v-model.number='num'></p>
<p>{{typeof num}}</p>
<script>
          const vm=new Vue({
             el:'.app',
             data:{
                site:'php中文网',
                num:0,
             },
             methods:{
             }
          });
    </script>

v-for遍历

遍历数组，对象，对象数组

<body>
    <div class="app">
        <!-- key可以干预diff算法 -->
        <!-- vue通过稳定且唯一的key值 判断这个节点是否需要更新,以提升效率     -->
        <!-- key只能是整数或不重复的字符串 -->
        <ul>
      <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li>
      </ul>
      <ul>
        <li v-for="(user,index) in users" :key="user.id">{{user.id}}--{{user.name}}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'.app',
            data:{
              items:["合肥","苏州","杭州"],
              //对象
              user:{
                  name:"小红",
                  email:"tp@php.cn",
              },
            //对象数组
              users:[
                 {id:1,name:"小明",email:"qq@qq.com"},
                 {id:2,name:"小彭",email:"123@qq.com"},
                 {id:3,name:"小龙",email:"163@qq.com"},
            ]
            },
        });
    </script>
</body>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html的基本标签介绍

2020-12-09 11:43:07