Vue.js 学习笔记

最新推荐文章于 2022-03-14 23:05:36 发布

Martind

最新推荐文章于 2022-03-14 23:05:36 发布

阅读量348

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Martind/article/details/82735323

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue基础

{{}} 显示js界面传过来的数据
v-bind 绑定提示信息
v-if 条件语句
v-for 绑定数组数据
v-on 添加一个事件监听器，通过它可以调用Vue实例中定义的方法
v-model 表单输入和应用状态之间的双向绑定
Vue.component() 定义组件
v-html 用于输出真正的html
v-pre 用于显示{{}} 而不进行替换，可以跳过这个元素和它的子元素的编译过程

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue learn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<div id="app">
    <input type="text" v-model="name" placeholder="name">
    <h1>hello,{{name}}</h1>

</div>

<script src="index.js"></script>
</body>
</html>

var app = new Vue({
    el:'#app',
    data:{
        name: ''
    }
})

可以通过app.$el 访问该元素，Vue提供了很多的属性和方法都可以通过$开头

一个计时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue learn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<div id="app">
    {{date | formateDate()}}
</div>

<script src="index.js"></script>
</body>
</html>

var padDate = function (value) {
    return value < 10 ? '0' + value : value;
};


var app = new Vue({
    el: '#app',
    data: {
        date:new Date()
    },
    filters:{
        formateDate:function (value) {
            var date = new Date(value);
            var year = date.getFullYear();
            var month = padDate(date.getMonth()+1);
            var day = padDate(date.getDate());
            var hours = padDate(date.getHours());
            var minuates = padDate(date.getMinutes());
            var seconds = padDate(date.getSeconds());
            return year + '年' + month + '月' + day + '日' + " " + hours + ":" + minuates + ":" + seconds;
        }
    },
    mounted:function () {
        var _this = this;
        this.timer = setInterval(function () {
            _this.date = new Date();
        },1000);
    },
    beforeDestroy: function () {
        if(this.timer){
            clearInterval(this.timer);
        }
    }
})

在`{{}}` 中不但可以绑定属性值，还可以使用JavaScript表达式进行简单的运算、三元运算等

<div id="app">
    {{number/10}}</br>
    {{is ? 'yes':'no'}}</br>
    {{text.split('').reverse().join('')}}</br>
</div>

var app = new Vue({
    el:'#app',
    data:{
        number: 100,
        is: false,
        text: 'Martin'
    }
})

`v-if` 用法

当其表达式的值改变时，相应地将某些行为应用到DOM上

<div id="app" align="center">
    <p v-if="show">show this message</p>
</div>

var app = new Vue({
    el:'#app',
    data:{
        show:true
    }
})

`v-bind` 用法

动态更新html元素的属性

<div id="app" align="center">
    <a v-bind:href="url">link</a>
    <img v-bind:src="imgUrl">
</div>

var app = new Vue({
    el:'#app',
    data:{
        url:'https://www.baidu.com/',
        imgUrl:'https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png'
    }
})

`v-on` 用法

用来绑定事件监听器

<div id="app" align="center">
    <p v-if="show">message</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>

var app = new Vue({
    el:'#app',
    data:{
        show:true
    },
    methods:{
        handleClose:function () {
            this.show = false;
        }
    }
})

语法糖

vue元素	替换
`v-bind`	`:`
`v-on`	`@`

计算属性

如果表达式过长，或者逻辑更为复杂，就会变得臃肿，难以阅读和维护，这个时候可以使用计算属性进行改写，所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果

<div id="app" align="center">
    {{reversedText}}
</div>

var app = new Vue({
    el:'#app',
    data:{
        text:'hello Martin'
    },
    computed:{
        reversedText:function () {
            return this.text.split('').reverse().join('')
        }
    }
})

计算属性还可以依赖多个Vue实例的数据，只要任一个数据变化，计算属性就会重新执行，视图也会更新。
计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其它实例的数据。

<div id="app" align="center">
    姓名：{{fullName}}
</div>

var app = new Vue({
    el: '#app',
    data: {
        firstName:'Martin',
        lastName:'yu'
    },
    computed: {
        fullName:{
            get:function () {
                return this.firstName + " " + this.lastName;
            },
            set: function (newValue) {
                var names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
})

计算属性缓存

methods 也可以实现和计算属性相同的效果，但是，计算属性是基于它的依赖缓存的，只有当它所依赖的数据发生变化时，它才会重新取值。而methods却是不同，只要重新渲染，它就会被调用，函数也会被执行。

`v-bind` 及 `class` 与`style`绑定

对象语法

<div id="app">
    <div :class="{'active':isActive}"></div>
</div>

var app = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})

对象中也可以传入多个属性，来动态的切换class 。:class 可以与普通 class 共存，也可绑定计算属性。如果需要多个class 时，可以使用数组语法，给:class 绑定一个数组，应用一个class 列表

`v-cloak`

解决初始化慢导致页面闪动

`v-once`

定义它的元素或组件只渲染一次，包括元素或组件所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

`v-if` `v-else-if` `v-else`

添加key 值防止元素被复用

<div id="app">
    <template v-if="type === 'name'">
        <label>user name:</label>
        <input placeholder="user name" key="name-input">
    </template>
    <template v-else>
        <label>email:</label>
        <input placeholder="email" key="email-input">
    </template>
    <button @click="handleToggleClick">switch type</button>
</div>

var app = new Vue({
    el:'#app',
    data:{
        type:'name'
    },
    methods:{
        handleToggleClick:function () {
            this.type = this.type === 'name' ? 'email':'name';
        }
    }

})

`v-show`

v-show是改变元素的css属性display，当表达式为false时，元素会隐藏，元素内联样式为display:none
v-if 和 v-show的区别就是，v-show仅仅是简单的css样式切换，无论条件真与否，都会被编译，而v-if 是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。

`v-for`

<div id="app">
    <ul>
        <li v-for="book in books">{{book.name}}</li>
    </ul>
</div>

var app = new Vue({
    el:'#app',
    data:{
        books:[
            {name:'hello'},
            {name:"world"},
            {name:'yu'}
        ]
    }

})

v-for的表达式支持一个可选参数作为当前项的索引，例如v-for="(book,index) in books"

数组更新

会改变原始数组：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
不会改变原始数组的：
filter()
concat()
slice()

购物车

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue learn</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app" v-cloak align="center">
    <template v-if="list.length">

        <table>
            <thead>
            <tr>
                <th></th>
                <!--<th>选择</th>-->
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <!--<td><input type="checkbox" name="shopingCheck"></td>-->
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="handleReduce(index)" :disabled="item.count==1">-</button>
                    {{item.count}}
                    <button @click="handleAdd(index)">+</button>
                </td>
                <td>
                    <button @click="handleRemove(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div>总价：￥ {{totalPrice}}</div>
    </template>
    <div v-else>购物车为空</div>

</div>

<script src="index.js"></script>
</body>
</html>

var app = new Vue({
    el:'#app',
    data:{
        list:[
            {
                id:1,
                name:'iphone 7',
                price:5999,
                count:1
            },
            {
                id:2,
                name:'iphone 8',
                price:5888,
                count:2
            },
            {
                id:3,
                name:'macbook pro',
                price:18688,
                count:1
            }
        ]
    },
    computed:{
        totalPrice:function () {
            var total = 0;
            for(var i=0;i<this.list.length;i++){
                var item = this.list[i];
                total+=item.price*item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    },
    methods:{
        handleReduce:function (index) {
            if(this.list[index].count ===1) return;
            this.list[index].count--;
        },
        handleAdd:function (index) {
            this.list[index].count++;

        },
        handleRemove:function (index) {
            this.list.splice(index,1);
        }
    }


})

[v-cloak]{
    display:none;
}
table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing:0;
    empty-cells:show;
}
th,td{
    padding:8px 16px;
    border:1px solid #e9e9e9;
    text-align:left;
}
th{
    background:#f7f7f7;
    color:#5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

单选按钮

<div id="app">
    <input type="radio" :checked="picked">
    <label>单选按钮</label>
</div>

var app = new Vue({
    el:'#app',
    data:{
        picked:false
    }

})

如果想要实现互斥的话可以通过使用v-model配合value 使用

<div id="app">
    <input type="radio" v-model="picked" value="html" id="html">
    <label for="html">html</label>
    </br>
    <input type="radio" v-model="picked" value="js" id="js">
    <label for="html">javaScript</label>
    </br>
    <input type="radio" v-model="picked" value="css" id="css">
    <label for="html">css</label>
    </br>
    <p>选择是：{{picked}}</p>
</div>

var app = new Vue({
    el:'#app',
    data:{
        picked:'js'
    }

})

复选按钮

Martind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 学习笔记

声明式渲染{{}} 显示js界面传过来的数据v-bind 绑定提示信息条件与循环v-if 条件语句v-for 绑定数组数据处理用户输入v-on 添加一个事件监听器，通过它可以调用Vue实例中定义的方法v-model 表单输入和应用状态之间的双向绑定组件化应用构建Vue.component() 定义组件v-html 用于输出真正的html*...
复制链接

扫一扫