1、helloworld样例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好, {{name}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var myData = {
            name : '',
            a : 2
        }
        var app = new Vue({
            el:'#app',
            data:myData,
            created:function () {
                console.log(this.a)
            },
            mounted: function () {
                console.log(this.$el)
            }
        })
    </script>
</body>
</html>

显示效果：

Vue生命周期钩子：

  • created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用。
  • mouted：el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
  • beforeDestroy：实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。

2、指令

指令说明
v-html用于输出html,不是将数据解析后的纯文本
v-pre用于跳过这个元素和它的子元素的编译过程，如想显示{{}}标签不进行替换
v-if，v-else-if, v-else条件指令
v-model实现表单输入和应用状态之间的双向绑定
v-bind（省略形式为:）动态更新html元素上的属性
v-on（省略形式为@）用于绑定事件监听器。表达式可以是一个方法名，这些方法可以写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前Vue实例本身。也可以是一个内联语句。
v-once一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容
v-show是改变元素的css属性display。当v-show表达式的值为false时，元素会隐藏。不能在<template>中使用
v-for用于循环遍历数组或者对象，需要结合in来使用，类似item in items的形式。也支持一个可选参数作为当前项的索引。可以用在内置标签<template>上。

v-if,v-else-if,v-else如果一次判断的是多个元素，可以在Vue.js内置的元素上使用条件指令，最终渲染的结果不包含该元素。如

<template v-if="status === 1">
	<p>这是一段文本</p>
	<p>这是一段文本</p>
	<p>这是一段文本</p>
</template>

 v-model使用在单选按钮时，可以不需要v-model,直接使用v-bind绑定一个布尔类型的值，为真时选中，为否是不选中。如果是应用在组合情况下，需要v-model配合value来使用。

        <br>
        <input type="radio" v-model="picked2" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="radio" v-model="picked2" value="js" id="js">
        <label for="js">JavaScript</label>
        <br>
        <input type="radio" v-model="picked2" value="css" id="css">
        <label for="css">CSS</label>
        <br>
        <p>选择的项是： {{picked2}}</p>

 显示效果为：

 v-model应用在复选框上也分单独使用和组合使用，单独使用时，也是有v-model来绑定一个布尔值。组合使用时，v-model与value一起，多个勾选框绑定到同一个数组类型的数据。

        <br>
        <br>
        <input type="checkbox" v-model="checked2" value="html" id = "html">
        <label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked2" value="js" id = "js">
        <label for="js">JavaScript</label>
        <br>
        <input type="checkbox" v-model="checked2" value="css" id = "css">
        <label for="css">CSS</label>
        <br>
        <p>选择的项是: {{checked2}}</p>

显示效果为

v-model用于选择列表时，也分为单选 和多选两种方式。单选情况为

        <br>
        <br>
        <select v-model="selected">
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的项是：{{selected}}</p>

显示效果为

 <option>是备选项，如果有value属性，v-model会优先匹配value的值，如果没有，会直接匹配<option>的text。

给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组。

显示效果为

 在使用v-model与value配合使用时，如果value是动态值，则需要用v-bind来实现，即 :value来指定动态值

3、过滤器

在{{}}插值的尾部添加一个管道"|"对数据进行过滤。过滤规则是自定义的，通过给Vue实例添加选项filters来设置。

过滤器也支持串联，而且可以接收参数。如{{message | filterA | filterB}},{{message | filterA('arg1', 'arg2')}}

4、计算属性

模板内的表达式常用于简单的运算，当过长或者逻辑复杂时，计算属性用于解决此问题的。

所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。每一个计算属性都包含一个getter和一个setter。当计算属性是函数属性时，表示的是getter。绝大多情况下，只会用默认的getter方法来读取一个计算属性，在业务中很不使用setter。

计算属性可以依赖其它计算属性，也可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。

计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，它才会重新计算。

5、购物车样例

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="index.js"></script>
</body>
</html>

 index.js文件 

var app = new Vue({
    el : '#app',

    data : {
        list : [
            {
                id : 1,
                name : 'iPhone 7',
                price : 6188,
                count : 1
            },
            {
                id : 2,
                name : 'iPad Pro',
                price : 5888,
                count : 1
            },
            {
                id : 3,
                name : 'MacBook Pro',
                price : 21488,
                count : 1
            }
        ]
    },

    computed : {
        totalPrice : function() {
            let total = 0;
            for (let i = 0; i < this.list.length; i++) {
                let 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);
        }
    }
})

 style.css文件 

[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;
}

 显示效果

6、组件

组件注册分为全局注册和局部注册

全局注册通过Vue.component('my-component', options)

局部注册使用Vue实例中的components选项，注册后的组件只有在该实例作用域下有效。组件中也可以使用components选项来注册组件，使组件可以嵌套。

除了template选项外，也可以有其它选项，如data，computed，methods等，但是在使用data时，必须是函数。

 6.1 组件通信

父组件->子组件：通过props

子组件->父组件：子组件用$emit来触发事件，父组件用$on来监听子组件事件。父组件也可以直接在子组件的自定义标签使用v-on来监听子组件触发的自定义事件。代码例子如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>总数： {{total}}</p>
        <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('my-component', {
            template: '\
                <div>\
                    <button @click="handleIncrease">+1</button>\
                    <button @click="handleReduce">-1</button>\
                </div>',
            data: function () {
                return {
                    counter : 0
                }
            },
            methods: {
                handleIncrease : function () {
                    this.counter++;
                    this.$emit('increase', this.counter);
                },
                handleReduce : function () {
                    this.counter--;
                    this.$emit('reduce', this.counter);
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data : {
                total : 1
            },
            methods : {
                handleGetTotal : function(total) {
                    this.total = total;
                }
            }
        })
    </script>
</body>
</html>

非父子组件通信 ：即兄弟组件和跨多级组件。一种是通过创建空Vue实例，来发送和接收消息。

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>消息：{{message}}</p>
        <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var bus = new Vue();

        Vue.component('my-component', {
            template: '\
                <div>\
                    <button @click="handleEvent">+1</button>\
                </div>',
            methods: {
                handleEvent : function () {
                    bus.$emit('on-message', '来自组件my-component的事件');
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data : {
                message : ''
            },
            mounted : function () {
                var _this = this;
                bus.$on('on-message', function (msg) {
                    console.log(msg)
                    _this.message = msg;
                })
            }
        })
    </script>
</body>
</html>

或者通过$parent来达到子组件到父组件的传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{message}}
        <component-a></component-a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        Vue.component('component-a', {
            template: '\
                    <button @click="handleEvent">通过父链直接修改数据</button>\
                ',
            methods: {
                handleEvent : function () {
                    this.$parent.message = '来自组件component-a的内容';
                }
            }
        });

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

        })
    </script>
</body>
</html>

$children达到父组件到子组件的传递，由于子节点可能有很多，可以使用$refs.name来访问子节点 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="handleRef">通过ref获取子组件实例</button>
        <component-a ref="comA"></component-a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        Vue.component('component-a', {
            template: '\
                    <div>子组件 {{message}}</div>\
                ',
            data: function () {
                return {
                    message : '子组件内容'
                }
            }
        });

        var app = new Vue({
            el: '#app',
            methods : {
                handleRef : function () {
                    this.$refs.comA.message = 'abc';
                }
            }

        })
    </script>
</body>
</html>

参考资料：

《Vue实战》

# vue.js # 学习 # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue