Vue初体验（二）Vue的基本使用

　　3。入门实例
　　3。3。2。vue声明式渲染
　　然后我们通过Vue进行渲染：｛｛name｝｝，非常帅！！！首先通过newVue（）来创建Vue实例然后构造函数接收一个对象，对象中有一些属性：el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个pdata：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中name：这里我们指定了一个name属性页面中的h2元素中，我们通过｛｛name｝｝的方式，来渲染刚刚定义的name属性。
　　打开页面查看效果：
　　更神奇的在于，当你修改name属性时，页面会跟着变化：
　　3。3。3。双向绑定vmodel
　　我们对刚才的案例进行简单修改：｛｛name｝｝，非常帅！！！有｛｛num｝｝位女神为他着迷。
　　我们在data添加了新的属性：num在页面中有一个input元素，通过vmodel与num进行绑定。同时通过｛｛num｝｝在页面输出
　　我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。input与num绑定，input的value值变化，影响到了data中的num值页面｛｛num｝｝与数据num绑定，因此num值变化，引起了页面效果变化。
　　没有任何dom操作，这就是双向绑定的魅力。
　　3。3。4。事件处理
　　我们在页面添加一个按钮：点我这里用von指令绑定点击事件，而不是普通的onclick，然后直接操作num普通click是无法直接操作num的。
　　效果：
　　4。Vue实例
　　4。1。创建Vue实例
　　每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：
　　每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。
　　我们可以通过el属性来指定。
　　例如一段html模板：
　　然后创建Vue实例，关联这个pvarvmnewVue（｛el：app｝）
　　这样，Vue就可以基于id为app的p元素作为模板进行渲染了。在这个p范围以外的部分是无法使用vue特性的。
　　4。3。数据
　　当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是响应式系统。
　　html
　　jsvarvmnewVue（｛el：app，data：｛name：刘德华｝｝）name的变化会影响到input的值input中输入的值，也会导致vm中的name发生改变
　　4。4。方法
　　Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。
　　html：｛｛num｝｝加
　　js：varvmnewVue（｛el：app，data：｛num：0｝，methods：｛add：function（）｛this代表的当前vue实例this。num；｝｝｝）
　　4。5。生命周期钩子
　　4。5。1。生命周期
　　每个Vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
　　生命周期：
　　4。5。2。钩子函数
　　beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化是调用，也可以将他理解为初始化函数比较方便一点，在Vue1。0时，这个函数的名字就是init。
　　created：在创建实例之后进行调用。
　　beforeMount：页面加载完成，没有渲染。如：此时页面还是｛｛name｝｝
　　mounted：我们可以将他理解为原生js中的window。onloadfunction（｛。，。｝），或许大家也在用jquery，所以也可以理解为jquery中的（document）。ready（function（）｛。｝），他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1。0版本中名字为compiled。此时页面中的｛｛name｝｝已被渲染成峰哥
　　beforeDestroy：该函数将在销毁实例前进行调用。
　　destroyed：改函数将在销毁实例时进行调用。
　　beforeUpdate：组件更新之前。
　　updated：组件更新之后。
　　例如：created代表在vue实例创建后；
　　我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：创建vue实例varappnewVue（｛el：app，el即element，该vue实例要渲染的页面元素data：｛渲染页面需要的数据name：峰哥，num：5｝，methods：｛add：function（）｛this。num；｝｝，created：function（）｛this。num100；｝｝）；
　　4。5。3。this
　　我们可以看下在vue内部的this变量是谁，我们在created的时候，打印thismethods：｛add：function（）｛this。num；console。log（this）；｝｝，
　　5。指令
　　什么是指令？
　　指令（Directives）是带有v前缀的特殊特性。指令特性的预期值是：单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
　　例如我们在入门案例中的von，代表绑定事件。
　　5。1。插值表达式
　　5。1。1。花括号
　　格式：｛｛表达式｝｝
　　说明：该表达式支持JS语法，可以调用js内置函数（必须有返回值）表达式必须有返回结果。例如11，没有结果的表达式不允许使用，如：vara11；可以直接获取Vue实例中定义的数据或函数
　　html｛｛name｝｝varappnewVue（｛el：app，data：｛name：Jack｝｝）
　　5。1。3。vtext和vhtml
　　使用vtext和vhtml指令来替代｛｛｝｝
　　说明：vtext：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出vhtml：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
　　HTML：vtext：
　　vhtml：
　　JS：varvmnewVue（｛el：app，data：｛hello：大家好，我是峰哥｝｝）
　　执行结果：
　　5。2。vmodel
　　刚才的vtext和vhtml可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的vmodel是双向绑定，视图（View）和模型（Model）之间会互相影响。
　　既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前vmodel的可使用元素有：inputselecttextareacheckboxradiocomponents（Vue中的自定义组件）
　　基本上除了最后一项，其它都是表单的输入项。
　　举例：
　　html：Java
　　PHP
　　Swift
　　你选择了：｛｛language。join（，）｝｝多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型radio对应的值是input的value值input和textarea默认对应的model是字符串select单选对应字符串，多选对应也是数组
　　执行结果：
　　5。3。von
　　5。3。1。基本用法
　　von指令用于给页面元素绑定事件。
　　语法：
　　von：事件名js片段或函数名增加一个
　　减少一个
　　有｛｛num｝｝个女神迷恋峰哥
　　效果：
　　5。3。3。按键修饰符
　　在监听键盘事件时，我们经常需要检查常见的键值。Vue允许为von在监听键盘事件时添加按键修饰符：
　　记住所有的keyCode比较困难，所以Vue为最常用的按键提供了别名：
　　全部的按键别名：。enter。tab。delete（捕获删除和退格键）。esc。space。up。down。left。right
　　5。3。4。组合按钮
　　可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。。ctrl。alt。shiftDosomething
　　5。4。vfor
　　遍历数据渲染页面是非常常用的需求，Vue中通过vfor指令来实现。
　　语法：vforiteminitemsitems：要遍历的数组，需要在vue的data中定义好。item：迭代得到的数组元素的别名｛｛user。name｝｝｛｛user。gender｝｝｛｛user。age｝｝
　　执行结果：
　　5。4。2。数组角标
　　在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
　　语法vfor（item，index）initemsitems：要迭代的数组item：迭代得到的数组元素别名index：迭代到的当前元素索引，从0开始。
　　示例｛｛index1｝｝。｛｛user。name｝｝｛｛user。gender｝｝｛｛user。age｝｝
　　效果：这里可以看到人名前面有索引
　　5。4。3。遍历对象
　　vfor除了可以迭代数组，也可以迭代对象。语法基本类似
　　语法：vforvalueinobjectvfor（value，key）inobjectvfor（value，key，index）inobject
　　示例：1个参数时，得到的是对象的属性2个参数时，第一个是属性，第二个是键3个参数时，第三个是索引，从0开始｛｛index1｝｝。｛｛key｝｝｛｛value｝｝
　　效果：
　　5。5。vif和vshow
　　5。5。1。基本使用
　　vif，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
　　语法：vif布尔表达式
　　示例：点我呀
　　看到我啦？！看到我啦？！show
　　5。5。4。vshow
　　另一个用于根据条件展示元素的选项是vshow指令。用法大致一样：Hello！
　　示例：
　　不同的是带有vshow的元素始终会被渲染并保留在DOM中。vshow只是简单地切换元素的CSS属性display。点击切换
　　你好
　　5。6。vbind
　　html属性不能使用双大括号形式绑定，只能使用vbind指令。
　　在将vbind用于class和style时，Vue。js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
　　在将vbind用于class和style时，Vue。js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
　　5。6。1。绑定class样式
　　数组语法
　　我们可以借助于vbind指令来实现：
　　对象语法
　　我们可以传给vbind：class一个对象，以动态地切换class：
　　你可以在对象中传入更多属性来动态切换多个class。此外，vbind：class指令也可以与普通的class属性共存。如下模板：
　　上面的语法表示active这个class存在与否将取决于数据属性isActive的truthiness（所有的值都是真实的，除了false，0，，null，undefined和NaN）。
　　你可以在对象中传入更多属性来动态切换多个class。此外，vbind：class指令也可以与普通的class属性共存。如下模板：
　　和如下data：data：｛isActive：true，hasError：false｝
　　结果渲染为：
　　active样式和textdanger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，textdanger不存在。
　　通常情况下，绑定的数据对象不必内联定义在模板里：
　　数据：data：｛classObject：｛active：true，textdanger：false｝｝
　　效果和之前一样：
　　5。6。2。绑定style样式
　　数组语法
　　数组语法可以将多个样式对象应用到同一个元素上：data：｛baseStyles：｛backgroundcolor：red｝，overridingStyles：｛border：1pxsolidblack｝｝
　　渲染后的结果：
　　对象语法
　　vbind：style的对象语法十分直观看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebabcase，记得用单引号括起来）来命名：
　　数据：data：｛activeColor：red，fontSize：30｝
　　效果：
　　5。8。watch
　　watch可以让我们监控一个值的变化。从而做出相应的反应。
　　示例：
　　总结：
　　关于怎么Vue的基本使用就介绍到这里。在这篇文章之前有一篇入门文章。是关于Vue项目搭建的。喜欢的话欢迎大家收藏转发。同时也顺便关注一下我。