Vue -- 基础

时间：2020-06-16 22:09:55 阅读：68 评论：0 收藏：0 [点我收藏+]

Vue

Vue ：它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

Vue的使用

语法

vue的使用要从创建Vue对象
 var vm = new Vue({
         el:"#app",
          data: {
             数据变量:"变量值",
             数据变量:"变量值",
             数据变量:"变量值",
          },
   });

　　el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
　　data: 保存vue.js中要显示到html页面的数据。

基本使用

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">{{message}}</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

注意事项

Vue实例化的对象是独立的
Vue语法区分大小写
Vue对象代码写在body后面

MVVM架构思想

　MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。MVVM的数据的修改与增加都是同步的

　model：模板，数据展示到页面中

　views：视图，数据要显示的HTML页面

　viewsmodel：双向数据绑定，负责连接 View 和 Model，保证视图和数据的一致性

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    <input v-model="message">
    {{message}}
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

技术分享图片

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.$data.message);  # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

数据显示

　　1.纯文本数据用 {{ }}表示

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    <h1>message</h1>

</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

　　2.单标签使用 v-model方法

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    <input v-model="message">
    {{message}}
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

　　3.双标签使用 v-html方法

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div class="k">
    <span v-html="message"></span>
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:".k",
        data:{
            message:"<a>hello world</a>"
        }
    })
</script>

</body>
</html>

常用指令

属性操作

语法

　　<标签名 :标签属性="data属性"></标签名>

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div class="k">
    <a :href="url">百度</a>
    
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:".k",
        data:{
            url:"http//www.daidu.com"
        }
    })
</script>

例子：显示密码

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    密码:<input :type="type" ><button @click="change">显示密码</button>

</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
   var vm = new Vue({
       el:"#k",
       data:{
           type:"password",
           password:"",
       },
       methods:{
           change(){
               if(this.type=="password"){this.type="text";}
               else {this.type="password";}

           }
       }

   })
</script>

事件操作

语法

有两种事件操作的写法，@事件名和 v-on:事件名

<button v-on:click="num++">按钮</button>  
<button @click="num+=5">按钮2</button>

例子：

   <script src="Vue/vue/vue.js"></script>
</head>
<body>
<div id="index">
    商品：<button @click="sub">-</button>
        <input type="text" v-model="goods.num">
        <button @click="goods.num++">+</button>
</div>
    <script>
        var vm = new Vue({
            el:"#index",
            data:{goods:{num:0}},
            methods:{sub(){if(this.goods.num --<1){this.goods.num=0}}}
        })
    </script>
</body>

样式操作

控制标签class类名语法

　　<h1 :class="值">元素</h1> 值可以是字符串、对象、对象名、数组

<style>
    .box1{
        color: red;
        border: 1px solid #000;
    }
    .box2{
        background-color: orange;
        font-size: 32px;
    }
    </style>
</head>
<body>
<div id="box">
    <idv :class="cls">字符串</idv>
    <br>
    <idv :class="{box1:false}">对象</idv>
    <br>
    <idv :class="[cls,cls1]">数组</idv>
    <br>
    <idv :class="cls3?‘box1‘:‘‘">三元表达式</idv>

</div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{cls:"box2",
            cls1:{
                box1:false,
                box2:true,
            },
            cls3:true},
        methods:{}})

    </script>
</body>

控制标签style样式

格式1：值是json对象，对象写在元素的:style属性中
     标签元素：
             <div :style="{color: activeColor, fontSize: fontSize + ‘px‘ }"></div>
     data数据如下：
         data: {
             activeColor: ‘red‘,
             fontSize: 30
         }
格式2：值是对象变量名，对象在data中进行声明
   标签元素：
               <div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
                styleObject: {
                     color: ‘red‘,
                     fontSize: ‘13px‘
                          }
                 }

格式3：值是数组
  标签元素：
                <div v-bind:style="[style1, style2]"></div>
    data数据如下：
                data: {
                     style1:{
                       color:"red"
                     },
                     style2:{
                       background:"yellow",
                       fontSize: "21px"
                     }
                }

vue版本选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>

    <div id="card">
        <div class="title">
            <span @click="num=0" :class="num==0?‘current‘:‘‘">国内新闻</span>
            <span @click="num=1" :class="num==1?‘current‘:‘‘">国际新闻</span>
            <span @click="num=2" :class="num==2?‘current‘:‘‘">银河新闻</span>
            <!--<span>{{num}}</span>-->
        </div>
        <div class="content">
            <div class="list" :class="num==0?‘active‘:‘‘">国内新闻列表</div>
            <div class="list" :class="num==1?‘active‘:‘‘">国际新闻列表</div>
            <div class="list" :class="num==2?‘active‘:‘‘">银河新闻列表</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#card",
            data:{
                num:0,
            },
        });

    </script>

</body>
</html>

条件渲染指令

v-if

<style>
    .box{
         width:200px ;
         height:30px;
        background-color: red;
}
</style>

<body>
<div id="app">
    <button>登录</button>
    <div class="box" v-if="is_show">登录窗口</div>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show:false
            }
        })

    </script>

v-else

<div id="app">
    <p v-if="is_show"><a>登录</a></p>
    <p v-else="is_show"><a>退出</a></p>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show:false
            }
        })
    </script>

v-else-if

<div id="app">
    <p v-if="num==1"><a>1</a></p>
    <p v-else-if="num==2"><a>2</a></p>
    <p v-else="num==3"><a>3</a></p>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:3
            }
        })
    </script>

v-show

用法和v-if大致一样，区别在于2点：

v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

<div id="app">
    <p v-show="is_show">隐藏</p>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show:true
            }
        })
    </script>

列表渲染指令

div id="app">
    <table border="1" align="center">
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>标题</th>
            <th>价格</th>
        </tr>
        <tr v-for="book,index in book_list">
            <td>{{index+1}}</td>
            <td>{{book.id}}</td>
            <td>{{book.title}}</td>
            <td>{{book.price}}</td>
        </tr>
    </table>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                book_list:[
                        {"id":1,"title":"图书名称1","price":200},
                        {"id":2,"title":"图书名称2","price":200},
                        {"id":3,"title":"图书名称3","price":200},
                        {"id":4,"title":"图书名称4","price":200},
                    ]
            }
        })
    </script>

Vue -- 基础

原文：https://www.cnblogs.com/zhenghuiwen/p/13144620.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)