Vue笔记（一）:基本语法 实例 生命周期 指令 style绑定

基本语法

<div id="app">{
    {
     message }}
</div>

div的id是app，内容为一个名为message的变量

在js代码块内：

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

声明一个名为app的对象，该对象是一个vue对象，其中element使用id选择器，选择了id为app的代码

块，并为变量message赋值"hello vue"

完成渲染后即可看到页面上出现"Hello Vue"这行字

创建Vue实例

var vm = new Vue({
    // 选项
})

示例

// 我们的数据对象
var data = {
     a: 1 }// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
    data: data
})// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2// ……反之亦然
data.a = 3
vm.a // => 3

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程

生命周期钩子 函数可以让用户在实例化的过程中进行一些操作

beforeCreate – created – beforeMount – mounted – beforeDestroy – destroyed

除此之外，在data更新时，存在beforeUpdate 和 updated 两个阶段

调用生命周期钩子的示例如下：

		<script type="text/javascript">var vm = new Vue({
    el: '#app',data: {
    msg : "hi vue",a : 'hihi'},beforeCreate:function(){
    console.log('beforeCreate');},created:function(){
    console.log('created')},beforeMount:function(){
    console.log('beforeMount')},mounted:function(){
    console.log('mounted')},beforeUpdate:function(){
    console.log('beforeUpdate')},updated:function(){
    console.log('updated')}});vm.$watch('a',function(newval,oldval){
    console.log(newval,oldval)})setTimeout(function() {
    vm.msg = 'change...'}, 3000);</script>

语法

插值

• 文本插值

常常使用{ {}}来插值

<span>Message: {
    {
     msg }}</span>

使用 v-once指令，可以使插值为一次性的

<span v-once>不变的: {
    {
     msg }}</span>

• 原始html

使用指令v-html来输出html元素而非字符串

<div id="app">{
    {
    msg}}<p>这是字符串:{
    {
    rawHtml}}</p><p v-html="rawHtml"></p></div><script type="text/javascript">var vm = new Vue({
    el: '#app',data: {
    msg : "hi vue",rawHtml : '<span style="color:red">这应该是红色的</span>'},})</script>

结果

• HTML属性

Mustache语法不能作用在HTML特性上，需要使用v-bind指令

<div v-bind:class="color"></div>

这里对该标签的class进行了绑定，绑定了color这个属性，此时我们可以在vue对象中对该特性赋值

data: {
    msg : "hi vue",rawHtml : '<span style="color:red">这应该是红色的</span>',color : 'red'},

那么，div的class名称就是"red"了，可以使用css样式对.red进行设定

• javascript语句

<p>{
    {
     number + 1 }}</p>

若在vue类中给number赋值10，则页面上会输出11

<p>{
    {
     ok ? 'yes' : 'no'}}</p>

三元运算符，对ok进行赋值

<p>{
    {
     message.split('').reverse().join('') }}</p>

字符串表达式，对message赋值

指令

指令是带有v-的特殊特性

指令的作用是在表达式的值变化改变时，将其影响于dom

例子

<p v-if='seen'>看到了吗</p>

v-if 根据表达式 seen 的真假来决定是否显示该元素

参数

一些指令能够接受参数

<a v-bind:herf='url'>...</a>

该指令将herf属性与url绑定，在vue中对url进行赋值，该超链接即链接到url指定的网址

修饰符

以.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定

例如 .prevent 修饰符告诉v-on指令对触发的事件调用event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

再例如，一个点击事件

<div @click="click1"><div @click.stop="click2">点我</div>
</div>

在没有.stop修饰的情况下，点击“点我”将触发两个click事件，但如果使用了.stop，就不会触发click1事件

class与style绑定

使用v-bind:class="…"可以实现动态class

<div id="app"><div class="test"v-bind:class="{active:isActive}"style="width: 200px;height: 200px;text-align: center;line-height: 200px;">hi Vue</div></div>

如上图，div元素的class与{active:isActive}进行了绑定

active是css样式，即isActive的真假决定了该div是否使用该样式

同时可以看到，静态的样式test与动态样式是可以共存的

也可以在动态样式中添加多个样式

数组写法：

v-bind:class="[isActive ? 'active' : '']"

使用三元运算符即可实现

style绑定

例子

<div
:style="{color : color,fontsize:size}">hi vue
</div>

通过style，可以设置color变量和size变量，在vue类中对这两个变量赋值即可改变样式

同样可以使用三元运算符

<div
:style="{color : color,fontsize:size,background:isRed ? '#FF000' : ''}">hi vue
</div>