Vue初识

最新推荐文章于 2023-08-01 23:19:13 发布

、小会

最新推荐文章于 2023-08-01 23:19:13 发布

阅读量79

点赞数

分类专栏： Vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/gmh1118/article/details/115433207

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue

vue是声明式编程，不是命令式编程

vue实例

创建一个Vue实例

创建一个Vue实例
    var vm = new Vue({});

一个vue应用由2部分组成：
    1. new Vue创建根Vue实例
    2. 可选的、嵌套的、可复用的组件树

    例：todo应用组件树：
    根实例
    └─ TodoList
    ├─ TodoItem
    │  ├─ TodoButtonDelete
    │  └─ TodoButtonEdit
    └─ TodoListFooter
        ├─ TodosButtonClear
        └─ TodoListStatistics
    Vue组件都是vue根实例

Vue的属性

var data = {a:1};
var vm = new Vue({
  data: data
});

Vue的数据property
    vm.a == data.a;

Vue的实例property，统一用前缀$，以便与用户定义的property区分
    vm.$data == data

Vue的生命周期函数

使用：例
    new Vue({
    data: {
        a: 1
    },
    created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
    }
    })
    // => "a is: 1"
1. beforecreated:
2. created：当一个实例被创建之后执行代码
3. beforeMount
4. mounted
5. beforeUpdate
6. update
7. boforeDestory
8. destory

模板语法

插值

{{}}:
{{message}}  将数据转换为普通文本
v-model {{message}}  将数据转换为HTML
v-bind:src="imgSrc"  由于{{}}语法不能绑定html的属性，则用v-bind，绑定imgSrc数据
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}  支持JS表达式

指令

【v-if】:条件
    <p v-if="seen">现在你看到我了</p>  seen: true //当seen为true时，p标签显示
【v-else】
【v-for】：循环
    <li v-for="item in movies">{{item}}<li> //movies是数据，item是movies数据中的每一项；遍历movies，循环绑定li
【v-model】实现表单输入和应用状态的双向绑定
【v-on】:事件监听
    <button v-on:click="count++">+<button> //当点击button按钮时count变量加1
【v-html】：将数据解释为HTML
【v-bind】

动态参数

[]:[]中的变量将作为js表达式动态求值

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

修饰符

.:指明一个指令应以特殊方式绑定
例：v-on指令触发事件调用event.preventDefault()
    <form v-on:submit.prevent="onSubmit">...</form>

缩写

v-bind -> :
v-on -> @

计算属性和侦听器

计算属性

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性VS方法

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
- 计算属性是基于它们的响应式依赖进行缓存的（也就是说，message不改变，就不会执行方法）
- 而方法则会在每一次渲染的时候都会重新执行，

- 相比之下，计算属性性能更好，因为它有缓存了，如果不希望有缓存，则用方法

计算属性VS帧听属性

【侦听属性 watch】观察和响应 Vue 实例上的数据变动
	var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
    })
- 侦听属性代码命令式、重复的，不如计算属性来的好

计算属性的setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
- 计算属性默认只有getter（表示该属性只读），当然也可以设置setter（表示该属性可写）

侦听器

watch
何时使用：
	1. 当数据变化时执行异步操作
	2. 当数据变化时执行开销大的操作
	
// 如果 `question` 发生改变，这个函数就会运行

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
        this.answer = 'Waiting for you to stop typing...'
        this.debouncedGetAnswer() //异步操作
    }
}

CSS与Style绑定 v-bind:class

【对象语法】
1. 当v-bind:class类为true时才会往class属性中添加class类
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}
2. 也可以这样写
	v-bind:class="classObj"
	data: {
		classObj:{
			isActive: true,
  			hasError: false
		}
    }
3. 也可以绑定一个返回对象的计算属性
    v-bind:class="classObj"
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
【数组语法】
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

绑定内联样式 v-bind:style

【对象语法】
1. 直接绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2.通过样式对象（变量）绑
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
3. 结合computed属性
computed:{
	styleObject:function(){
		return {
			color:this.color,
			fontSize:this.fontSize
		}
	}
}

【数组语法】
<div v-bind:style="[baseStyles, overridingStyles]"></div>

model&&view

model是一个js对象

{
    name: 'Robot',
    age: 15
}

创建一个vm

<div id="vm">
    ...
</div>

var vm = new Vue({
    el: '#vm',
    data: {
        name: 'Robot',
        age: 15
    }
});

el属性指定model绑定到哪个dom的根节点
data属性指定了model，并初始化了model的两个属性name和age
可以直接使用{{name}}引用model的某个属性

单向绑定：将model绑定到view，当我们使用js代码更新model时，view会自动更新

【vue单向绑定】
    直接写{{name}}绑定某个属性，
    如果关联者是对象值，可以用点引用
    如果关联者是数组值，可以用中括号引用

双向绑定：如果用户更新了view，model的数据也自动更新。

【vue实现双向绑定】
    1. 创建一个vm实例
        $(function () {
            var vm = new Vue({
                el: '#vm',
                data: {
                    email: '',
                    name: ''
                }
            });
            window.vm = vm;
        });
    2. 编写一个HTML FORM表单，并用v-model指令把某个<input>和Model的某个属性作双向绑定：
        <form id="vm" action="#">
            <p><input v-model="email"></p>
            <p><input v-model="name"></p>
        </form>
    3. 其他input的绑定
        例：checkbox实现双向绑定：
        <label><input type="checkbox" v-model="language" value="zh"> Chinese</label>
        <label><input type="checkbox" v-model="language" value="en"> English</label>
        <label><input type="checkbox" v-model="language" value="fr"> French</label>
        对应的model：language: ['zh', 'en']

        checkbox和布尔类型绑定：
        <input type="checkbox" v-model="subscribe">
        对应的model：subscribe: true;

        selects实现双向绑定：
        <select v-model="city">
            <option value="bj">Beijing</option>
            <option value="sh">Shanghai</option>
            <option value="gz">Guangzhou</option>
        </select>
        model:city: 'bj'

除了简单的单向绑定和双向绑定，MVVM还有一个重要的用途，就是让Model和DOM的结构保持同步。
使用MVVM时，当我们更新Model时，DOM结构会随着Model的变化而自动更新。当todos数组增加或删除元素时，相应的DOM节点会增加

或者删除
节点。
在vue中使用v-for指令来实现：

【model】
todos: [
    {
        name: '产品评审',
        description: '新款iPhone上市前评审'
    },
    {
        name: '开发计划',
        description: '与PM确定下一版Android开发计划'
    },
    {
        name: 'VC会议',
        description: '敲定C轮5000万美元融资'
    }
]
【v-for实现动态创建，更新model，则页面也随着更新】
    <ol>
        <li v-for="t in todos">
            <dl>
                <dt>{{ t.name }}</dt>
                <dd>{{ t.description }}</dd>
            </dl>
        </li>
    </ol>

【注意点】
    Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。
    但是，对于数组元素的赋值，却没有办法直接监听，因此，如果我们直接对数组元素赋值，则会导致vue无法更新view；
        vm.todos[0] = {
            name: 'New name',
            description: 'New description'
        };  //这样无法更新vue

    正确的方法【不是赋值】，而是【更新】
        vm.todos[0].name = 'New name';
        vm.todos[0].description = 'New description';
        或者通过splice更新：
            var index = 0;
            var newElement = {...};
            vm.todos.splice(index, 1, newElement);
    Vue可以监听数组的splice、push、unshift等方法调用，所以，上述代码可以正确更新View

组件基础

创建一个Vue组件

例：创建一个button-counter的新组件
Vue.component('button-counter',{
	data:function(){
		return:{
			count:0
		}
	}
	template:'<button @click="count++">点击次数：{{count}}</button>'
});

1. data：组件的data必须是一个函数（因为函数的闭包特性，可以很好的保证组件复用之后每一个的数据都是互不关联的）
2. 通过此方式注册的组件类型是：全局注册(可以用在任何创建的Vue根实例中，也可以使用在任何子组件中，这样往往是不好的，因此需要局部注册)

创建根实例，并且引用button-counter组件(组件是可复用的)

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

new Vue({
	el:'#components-demo'
});

组件的局部注册

1. 声明一个变量接收创建的组件
var buttonCounter = {
	data:function(){
		return:{
			count:0
		}
	}
	template:'<button @click="count++">点击次数：{{count}}</button>'
}

2. 如果其他组件中要用这个组件

在模块中定义你想用的组件
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

B组件中使用buttonCounter
var ComponentB = {
  components: {
    'button-counter': buttonCounter
  },
  // ...
}