vuejs基础知识

@vuejs基础知识整理

vuejs基础整理

主要整理了vue的mmvm模式和基础的指令

mmvm模式

1. mmvm模式拆分解释

2. Model 负责数据存储

3. View 负责页面显示

4. View Model 负责业务逻辑处理(比如ajax请求等)，对数据进行加工后交给视图展示。

5. MMVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护简单。

3.vuejs中实现MMVM模式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Vue基础</title>
   </style>
</head>
<body>
   <!--view层 -->
   <div id="app">
       {{message}}
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    //vue 整体控制的是view model
       var app = new Vue({
           el: '#app',
           data: {
               message: 'hello Vue!' //model层
           }
       })
     </script>

基础的指令

插值表达式 {{}}

1. 文本

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

2. html

   <p>Using v-html directive: <span v-html="rawHtml"></span></p>
   

3. 解决网速慢导致的加载时，{{}}表达式解析慢导致出现{{msg}} 可以加 v-text 或者 v-html、v-cloak，可以避免压面出现{{msg}}
4. v-html和v-text 的区别

   v-text 渲染的是纯文本，v-html可以解析标签,v-cloak 必须配合
   <style>
   	[v-cloak]{
   		display:none
   	}
   </style>
   

v-bind指令

作用

• 可以给html元素或者组件动态的绑定一个或多个特性，例如动态绑定style和class

	<div id='app'>
		<input type='text' v-bind:value="name">
		<!-- 简写-->
		<input type='text' :value="name">
		<a v-bind="{'href':'http://www.baidu.com'+id}">
	</div>

v-model指令

作用

• 实现双向绑定，数据和视图一起改变

	<div id='app'>
		<input type='text' v-model="name">
	</div>

v-for指令

作用

• 通常是根据数组中的元素遍历指定模板内容生成内容

		
	<ul id="app-3">
		<!--vue2的语法 -->
		<!--值遍历 -->
        <li v-for="value in objectDemo">
            {{value}}
        </li>
        <!-- 添加一个参数，获取健值 -->
        <li v-for="(item,name) in objectDemo">
            {{name}} : {{item}}
        </li>
        <!-- 添加第三个参数，作为索引 -->
        <li v-for="(item,name,index) in objectDemo">
            {{index}} : {{name}} : {{item}}
        </li>
    </ul>

v-if 和v-show

作用

• 条件性的渲染一块内容，只有条件为 truthy 值的时候，被渲染

	<h1 v-if="awesome">Vue is awesome!</h1>
	<h1 v-show="awesome">Vue is awesome!</h1>

比较

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-on指令

作用

• 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

	<div id='app'>
		<button v-on:click='submit'></button>
		<!--简写 -->
		<button @click='submit'></button>
	</div