Vue的常用指令

最新推荐文章于 2024-08-14 18:44:30 发布

Cherish_Me_Lxx

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量85

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Cherish_Me_Lxx/article/details/130314176

版权

1.Vue简介
vue官网说：Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
vue的渐进式表现为：

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

2.Vue的使用

2.1引入vue.js文件

<script src="../js/vue.js"></script>

2.2在body中创建一个div标签

<div id="app">
{{msg}}
</div>

2.3创建一个<script>标签

<script type="text/javascript">

var app=new Vue({
//把当前vue对象挂载到指定的标签元素上，使其vue生效。
el: "#app",

data:{
msg:"山鸟与鱼不同路",
}
})
</script>

3.Vue的常用指令
3.1 v-text 和v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <span>{{msg}}</span><hr>
          <span v-text="msg">你喜欢干什么?</span><hr>
           <!--v-text:无法解析html标签  v-html可以解析html标签-->
          <span v-html="msg">你喜欢干什么?</span>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='blue'>我喜欢打篮球</font>",
            }
      })
</script>
</html>

3.2 v-on基础

为元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <span>{{msg}}</span><hr>
          <button v-on:click="fun">点击</button>
        <!--上面的v-on:缩写为@-->
          <button @dblclick="fun2">点击2</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='red'>我喜欢打代码</font>",
            },
            //定义方法
            methods:{
                 fun(){
                     //this表示vue对象
                     this.msg="我喜欢打游戏";
                 },
                 fun2(){
                     this.msg="唱跳rap打篮球"
                 }
            }
      })
</script>
</html>

3.2 v-show 和 v-if

在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都控制元素在页面是否显示。

在用法上也是相同的

当表达式为true的时候，都会占据页面的位置
当表达式都为false时，都不会占据页面位置
v-show是采用样式的方式控制元素的显示和隐藏，也就是我们常用的display: none，此时虽然元素是隐藏状态，但在html代码中还是存在的。
v-if则是通过直接控制元素代码的方式在控制显示和隐藏。也就是说当元素隐藏的时候，该元素本身在html是不存在的。所以v-if的显示和隐藏。

3.3v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
         .a{
              border: red solid 5px;
         }
    </style>
</head>
<body>
    <div id="app">
          <!--如何让img标签中src属性引用vue对象中的数据-->
          <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

        <!--v-bind: 缩写为: -->
         <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

           <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:18,
                imgUrl:"imgs/sg.jpg",
                title:"帅哥",
                flag:true
            },
            methods:{
                 fun(){
                      this.imgUrl="imgs/1.jpg";
                      this.title="美女好看"
                 }
            }
      })
</script>
</html>

3.4v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <!--for(数据类型 b:数组){}-->
             <li v-for="(item,index) in hobby">
                 {{item}}--->{{index}}
             </li>
         </ul>

         <table width="500px" border="1" cellspacing="0" class="0">
               <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
               </tr>
              <tr v-for="item in users">
                   <td>{{item.name}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.sex}}</td>
                   <td>
                       <button @click="deleteUser(item.name)">删除</button>
                       <button >编辑</button>
                   </td>
              </tr>
         </table>


         <input type="text" @keyup.enter="fun()"/>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 hobby:["好吃","好喝","好色","好赌"],
                 users:[
                     {"name":"安志远","age":16,"sex":"女"},
                     {"name":"李云宵","age":19,"sex":"男"},
                     {"name":"闫锦超","age":15,"sex":"男"}
                 ]
            },
            methods:{
                 deleteUser(name){
                     alert(name);
                 },
                  fun(){
                      alert("触发了回车键");
                  }
            }
      })
</script>
</html>
————————————————
版权声明：本文为CSDN博主「望南风看北海」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wnfkbh/article/details/130236476

3.5 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
           <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
           <input type="text" v-model="name" />
           {{name}}
           <button @click="dj">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                name:"刘德华"
            },
            methods:{
                 dj(){
                    this.name="张学友";
                 }
            }
      })
</script>
</html>