Vue入门整理

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

简介

Vue是一个响应式的web视图层框架；响应式： 我们写代码只关注数据，视图随数据变化而变化。 视图层：UI层面的内容 框架和库： 框架是整个应用程序的设计方案，我们要做到一些功能，就必须遵照框架的规则去实现 库是很多方法的集合，是项目中功能的解决方案。我们要实现一些功能，可以自主的去调用库里的方法，还可以自己去定义一个方法实现。

引入Vue

1.直接cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 1. 引⽤全部 vue.js，运⾏时编译及渲染 javascript <div id="app"> <p>{{message}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'hello-world', }, }) </script> 运行时会先按照花括号的格式渲染成文本，等vue依赖下载完成，并且通过实例化拿到message的值之后才会编译并渲染出vue模板下的页面

2. 引⽤部分 vue.js，仅引⼊渲染部分

这种方式不会有编译的过程，代码自上往下执行，数据有时，才渲染相应数据页面，也经常在Vue.component()中使用javascript <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'hello-world', }, render: function(createElement) { return createElement('p',this.message) } }) </script>

2.vue-cli工程化搭建项目

常用指令

1.v-bind绑定属性

javascript <div id="app"> <p v-bind:title="title">{{message}}</p> <!-- 缩写格式 --> <p :title="title">{{message}}</p> </div> <script> new Vue({ el: '#app', data: { message: 'hello-world', title: 'world-title', }, }) </script>

2.v-on绑定事件

javascript <div id="app"> <p v-on:click="changeMessage()">{{message}}</p> <!-- 缩写格式 --> <p @click="changeMessage()">{{message}}</p> </div> <script> new Vue({ el: '#app', data: { message: 'hello-world', }, methods: { changeMessage: function() { if (this.message === 'hello-world') { this.message = 'world'; } else { this.message = 'hello-world' } } } })

3.v-model

javascript <div id="app"> <p v-for="item in items">{{item}}</p> </div> <script> new Vue({ el: '#app', data: { items: [1,2,3,4,5,6], }, }) </script>

4.v-show

javascript <div id="app"> <p v-for="item in items" v-show="item !== 4">{{item}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { items: [1,2,3,4,5,6], }, }) </script>

5.v-if/v-else

javascript <div id="app"> <p v-for="item in items"> <span v-if="item >= 5" :style="{color: 'red'}">大于等于5</span> <span v-else :style="{color: 'blue'}">小于5</span> {{item}} </p> </div> <script> new Vue({ el: '#app', data: { items: [1,2,3,4,5,6], }, }) </script>

6.v-for

javascript <div id="app"> <p v-for="(item,index) in items">{{item}}-{{index}}</p> <p v-for="(value,key) in obj">{{key}}-{{value}}</p> </div> <script> new Vue({ el: '#app', data: { items: [1,2,3,4,5,6], obj: {a:1,b:2,c:3} }, }) </script>

7.v-html

javascript <div id="app" v-html="html"> </div> <script> new Vue({ el: '#app', data: { html: '<p>Hello-World</p>' }, }) </script>

8.v-text

javascript <div id="app"> <p v-text="text"></p> </div> <script> new Vue({ el: '#app', data: { text: 'Hello-World' }, }) </script>

计算属性与函数

javascript <div id="app"> <p>{{message}}</p> <input v-model="message"></input> <input v-model="message2"></input> <p v-if="getLen">长度大于11</p> <p v-else>长度小于等于11</p> <p>{{len()}}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello-World', message2: 'Hello-World2' }, computed: { getLen: function () { console.log('computed') return this.message.length > 11; } }, methods: { len: function() { console.log('function') return this.message.length; } } }) </script> 执行上述代码可见

1.改变message,computed和function都会触发

2.改变message1,computed不会触发，而function依旧会触发

所以，computed只会在依赖发生改变时触发更新值。

组件

javascript <div id="app"> <hello-world v-for="item in items" :item="item"></hello-world> </div> <script> Vue.component('hello-world', { props: ['item'], render: function(createElement) { return createElement('p', this.item) } }) new Vue({ el: '#app', data: { items: [1,2,3,4,5,6], }, }) </script>