我最爱吃苹果

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