Vue系列之『满足多数需求的基本使用』

首先创建一个简单的vue应用

# 全局安装 vue-cli
$ npm i -g vue-cli
# 创建一个简单的vue仓库
$ vue init webpack-simple learnvue
# 安装依赖
$ cd learnvue
$ npm i
$ npm run dev

class绑定——动态地切换class

在:class上绑定一个对象
在:class上绑定一个对象名
在:class上绑定一个返回对象的计算属性
在:class上绑定一个数组，数组语法中也可以使用对象语法
三元表达式：根据条件切换列表中的class

注意：普通class和绑定class可以共存

style绑定——绑定内联样式

看着很像css内联样式，属性名可用驼峰式或用短横线分隔，短横线分隔要用单引号引起来
直接绑定到一个样式对象
结合计算属性使用
数组语法

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

vue不得不说的生命周期

当一个vue实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

看下图：

图源Vue.js教程

一个实例的生命周期分为creat、mount、update、destroy四个阶段，它们的分工各有不同：

create:创建
mount:挂载DOM
update:数据更新
destroy:销毁（一般为手动清理事件和定时器）

同时在这些过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。对应生命周期来看，又有以下8个钩子：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

看一个例子：

打开localhost:8080，页面显示初始msg内容，控制台打印beforeCreate、created、beforeMount、mounted

大约1s之后，页面内容发生变化，紧接着watch生效，控制台一次打印出hello,beforeUpdate,updated，这里没有打印出beforeDestroy和destroyed是因为页面上没有事件。

v-model

单行文本

v-model 指令用于在表单及 </code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <pre><code><template> <div id="app"> <input type="text" placeholder="edit me" v-value="hello"> </div> </template> </code></pre> <p>以上代码的效果是页面上会出现一个input输入框且有初始值value</p> <div class="image-package"> <div class="image-container" style="max-width: 185px; max-height: 36px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/56ebdff1a2884aaf8c9763c9c9f32a84.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/56ebdff1a2884aaf8c9763c9c9f32a84.jpg" width="185" height="36"></a> </div> </div> <div class="image-caption"></div> </div> <p>当我们在input中使用v-model用于绑定数据时，value值不生效</p> <pre><code><template> <div id="app"> <input type="text" placeholder="edit me" v-model="message" value="hello"> </div> </template> <script> export default { name: 'app', data() { return { message: '', } }, } </script> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 172px; max-height: 36px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/bfb3a3d456c34743bd526c8f2592633f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/bfb3a3d456c34743bd526c8f2592633f.jpg" width="172" height="36"></a> </div> </div> <div class="image-caption"></div> </div> <p>v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。如果有需要，我们应在组件的 data 选项中声明初始值。</p> <pre><code><template> <div id="app"> <input type="text" placeholder="edit me" v-model="value"> </div> </template> <script> export default { name: 'app', data() { return { message: '', value: 'init', } }, } </script> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 172px; max-height: 37px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/383c9eb15e414acba7f058896d814187.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/383c9eb15e414acba7f058896d814187.jpg" width="172" height="37"></a> </div> </div> <div class="image-caption"></div> </div> <p>现在结合前面学到的看一段代码：</p> <pre><code><template> <div id="app"> <input type="text" placeholder="edit me" v-model="message"> <button @click="clickBtn">Click me</button> <p :style="styleObj">Message is: {{message}}</p> </div> </template> <script> export default { name: 'app', data() { return { message: '', isClick: '' } }, computed: { styleObj() { return { color: this.isClick && this.message ? 'red' : '', background: this.isClick && this.message ? 'yellow' : '' } } }, methods: { clickBtn() { if (this.message) { this.isClick = true } } }, } </script> </code></pre> <p>我们为input定义了一个placeholder值为'edit me'并绑定了一个message属性</p> <div class="image-package"> <div class="image-container" style="max-width: 238px; max-height: 73px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/02cdd88ffbaf487b934340feb0c3a101.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/02cdd88ffbaf487b934340feb0c3a101.jpg" width="238" height="73"></a> </div> </div> <div class="image-caption"></div> </div> <p>首先看input里绑定的message和p中message之间的关系，前面说v-model双向绑定不过是语法糖，实际上还是单向绑定。<br> 当input中的内容发生变化，也就是input中绑定的message——来自于data中的message属性值发生了变化，p中的message也会随之改变，所以数据改变是单向的从data中的message属性到页面上的message属性变换的过程。所以p中的文本会随着input中的内容改变而改变。</p> <div class="image-package"> <div class="image-container" style="max-width: 237px; max-height: 79px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cf9bdf282cf2494888993b4525cc9cb9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/cf9bdf282cf2494888993b4525cc9cb9.jpg" width="237" height="79"></a> </div> </div> <div class="image-caption"></div> </div> <p>我们再来看看data中的另一个属性'isClick'，我们给它赋值为一个空的字符串，即布尔值false</p> <p>继续看代码，在button按钮上定义了一个单击事件'clickBtn'，在p元素上绑定了一个内联样式'styleObj'，我们把样式对象放在computed中，这样就会返回计算后的属性对象。当用户点击按钮时，如果input中有输入，我们将'isClick'值设为true，反应在页面上就是输入不为空的情况下点击按钮之后p元素有了黄色背景，字色变为红色。</p> <div class="image-package"> <div class="image-container" style="max-width: 236px; max-height: 75px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/030206b1b9614e248060a5ededc3b97d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/030206b1b9614e248060a5ededc3b97d.jpg" width="236" height="75"></a> </div> </div> <div class="image-caption"></div> </div> <h5>多行文本</h5> <pre><code><template> <div id="app"> <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines">