前端vue学习

veu.js学习

vue可以更高速地开发网页，提高效率在企业中效率就是金钱

• 框架是完整的方法函数，直接能用
• 模块是实现某一个功能的函数

node(后端）中的 MVC 与前端中的 MVM 的区别
vue.js 基本代码与 MVM 之间的对应关系

//包引入
<script src="./lib/vue-2.4.0.js"></script>
  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>

vue的几个指令：v-cloak、v-text、v-html… 的属性

• v-cloak:
  使用v-cloak能够解决插值表达式的闪烁问题
• v-text:
  也能解决上面问题，也有区别：v-text会覆盖替换的全部内容
• v-html把内容切换成HTML再渲染出来

<div id="app">
	<!-- 使用v-cloak能够解决插值表达式的闪烁问题 -->
		<p v-cloak>{{ msg }}</p>
		<!-- 它会覆盖整个内容 -->
		<h4 v-text = 'msg'></h4>
	</div> 

• v-bind:
  v-bind是vue中用来绑定自定义属性的指令

<input type="button" value="按钮" v-bind:title = "mytitle">
//可以简写为
//<input type="button" value="按钮"  :title = "mytitle">

• v-on：
  vue中用来绑定事件，缩写用@
  使用.stop阻止冒泡
  使用.prevent阻止默认行为，如链接等
  使用.keyup监听键帽的

<input type="button" value="按钮" v-on: click = "show">
methods: {//这个methods属性定义了当前vue实例的所有可用的方法
			show: function(
				alert('hello'),
		}

• v-model：(双向数据绑定，常用于表单填写）

<input type="text" style="width: 100%;" v-model="msg">

vue中的样式写法

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
    <!-- <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用三元表达式 -->
    <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->

• v-for: 注意：在遍历对象身上的键值对的时候， 除了 有 val、key ，在第三个位置还有 一个 索引
  注意：
  v-for 循环的时候，key 属性只能使用 number获取string。
  key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值。
  在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 。

<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>

 <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
data: {
        list: [1, 2, 3, 4, 5, 6]
      },
//迭代数字
   <!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 -->
    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>

• v-if、v-show: 的使用
  v-if 的特点：v-if = “ture” 与 v-else

  v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

  v-if 有较高的切换性能消耗

  v-show 有较高的初始渲染消耗

  如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

  如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

第一天学习总结：

1. MVC 和 MVVM 的区别

2. 学习了Vue中最基本代码的结构

3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show

4. 事件修饰符 ： .stop .prevent .capture .self .once

5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法

6. 在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this

7. 在 v-for 要会使用 key 属性 （只接受 string / number）

8. v-model 只能应用于表单元素

9. 在vue中绑定样式两种方式 v-bind:class v-bind:style