vue框架基础

最新推荐文章于 2024-05-16 09:42:29 发布

王子泉呀

最新推荐文章于 2024-05-16 09:42:29 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/qq_42068654/article/details/82703162

版权

JS框架-vue

职责划分：MVVM
Model：模型
View：视图
ViewModel：结合模型和视图

vue特点：
vue中的数据和页面上标签内容是’绑定’在一起的，当模型数据发生变动时，页面视图也会发生相应变化。这种特性称之为响应式框架。

例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!-- 视图, 是由两个{{}}占位，到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">{{name}}</div>

<script>
    // 每个页面要创建一个Vue对象（实例）
    var vue = new Vue({
        // 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
        data: {
            name: "hello, world"
        },
        // el 对应的dom元素，把数据和视图结合在一起
        el:"#app"
    });
</script>
</body>
</html>

注意：
1. 绑定时，要把一个统一的父标签与Vue对象进行绑定
2. 不要把Vue对象和html或body标签绑定，建议和一个div标签绑定

计算属性：
{{}} 中的表达式可以进行简单的运算，例如：

<p>{{name.split("").reverse().join("")}}</p>
<p>{{age+1}}</p>

为了不直接在视图执行这些复杂的计算，可以把这些计算通过计算属性来表示

<!-- 视图, 是由两个{{}}占位，到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">
    <p>{{nameReverse}}</p>
    <p>{{age+1}}</p>
    <div>
        <span>{{sex}}</span>
    </div>
</div>



<script>
    // 每个页面要创建一个Vue对象（实例）
    var vue = new Vue({
        // 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
        data: {
            name: "hello, world",
            age: 18,
            sex: "男"
        },
        // el 对应的dom元素，把数据和视图结合在一起
        el:"#app",
        computed: {
            /* 计算属性，对应一个函数，由普通属性计算而来 */
            nameReverse : function(){
                // this 代表vue对象
                return this.name.split("").reverse().join("");
            }
        }
    });
</script>

v-for指令

<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
</div>

<script>
    /*
    [
       {name:"商品1", price:3000.00, img:"图片名1.jpg"},
       {name:"商品2", price:4000.00, img:"图片名2.jpg"},
       {name:"商品3", price:2000.00, img:"图片名3.jpg"}
    ]

    */
    var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {name:"商品1", price:3000.00, img:"图片名1.jpg"},
                {name:"商品2", price:4000.00, img:"图片名2.jpg"},
                {name:"商品3", price:2000.00, img:"图片名3.jpg"}
            ]
        }
    });
</script>

v-if指令

条件成立时在视图上显示此标签，否则视图上不出现这个标签

<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>

    <table border="1" width="100%" v-if="list.length>0">
        <tbody>
            <!-- p代表数组中第i个元素，i是下标值-->
            <tr v-for="(p,i) in list">
                <td>{{i+1}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <td>{{p.img}}</td>
            </tr>
        </tbody>
    </table>
    <span v-else>暂无商品</span>
</div>

v-show指令
条件成立时在视图上显示此标签，否则视图上隐藏这个标签
ps：与v-if指令的区别在于条件不成立时v-if指令不创建该标签，v-show指令隐藏该标签。

v-bind绑定属性

要实现标签属性的绑定，必须使用v-bind 指令

<table border="1" width="100%" v-show="list.length>0">
    <tbody>
        <!-- p代表数组中第i个元素，i是下标值-->
        <tr v-for="(p,i) in list">
            <td>{{i+1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            <!-- {{}} 语法只能用来占位内容，不能作为标签的属性(特性)
                要绑定标签的属性，需要使用 v-bind:属性名="变量"

                简化写法(省略了v-bind)：
                :属性名="变量"
             -->
            <td><img width="110" v-bind:src=" 'images/' + p.img" :title="p.title"></td>
            <td><img width="110" :src=" 'images/' + p.img"></td>
        </tr>
    </tbody>
</table>

双向绑定：
v-bind:属性名（只能实现单向的绑定：模型的修改能立刻反映到视图，但视图的修改不能影响模型）
v-model:属性名（能够实现双向绑定：模型的修改能立刻反映到视图，视图的修改也能影响模型）

事件处理

<div id="app">
    <!-- 格式：        v-on:事件名
         简化写法：    @事件名
         还可以实现参数传递
    -->
    <input type="button" value="点我" v-on:click="abc(50)">
    <input type="button" value="点我" @click="abc(100)">
</div>


<script>
    var vue = new Vue({
        el:"#app",
        data: {

        },
        methods: {
            abc: function(i){
                console.log("点击了按钮", i);
            }
        }
    });
</script>

王子泉呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue框架基础

JS框架-vue职责划分：MVVM Model：模型 View：视图 ViewModel：结合模型和视图vue特点： vue中的数据和页面上标签内容是’绑定’在一起的，当模型数据发生变动时，页面视图也会发生相应变化。这种特性称之为响应式框架。例如：&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-...
复制链接

扫一扫