目 录CONTENT

文章目录

vue学习笔记(一)

在水一方
2022-01-10 / 0 评论 / 0 点赞 / 178 阅读 / 3,121 字 / 正在检测是否收录...

概念

vue是是一套用于构建用户界面的渐进式JavaScript框架

特点

1 只关注视图层, 采用自底向上增量开发的设计
2 易于上手,便于与第三方库或既有项目整合

兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

虚拟DOM

核心

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

入门案例

直接引入vue.js

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
	<div id="app">	
      {{ message }}
	</div>
</body>
<script type="text/javascript">
 var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello VueTest!'
  }
})

</script>
</html>

显示结果:Hello VueTest!

如何确定是否是响应式的

上述案例数据和DOM已经建立了关联,所有东西都是响应式的。我们要怎么确认呢?

  • 打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新

image.png

通过上述入门案例可以看到:我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

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

所有的 Vue 组件都是 Vue 实例

数据与方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		
      {{ a }}

	</div>


</body>
<script type="text/javascript">
	var obj={a:1234};
 var vm = new Vue({
  el: '#app',
  data: obj
});

 vm.$watch('a',function(newVal,oldVal){
     console.log(newVal,oldVal);
 })
// obj.a="test";
vm.a="test111";

</script>
</html>

上述案例可以看到:obj.a="test" 与通过vm来改变a属性的值都可以改变a的值

如果想要某一个属性或变量响应式的,需要在new Vue()的时候提前把这个变量进行声明

Vue实例还暴露了一些有用的实例property与方法它们都有前缀 $,以便与用户定义的 property 区分开来
vm.a="test111"和vm.$data.a="12323232323"一样都可以改变a属性的值

$watch()方法时当a值发生变化之后进行的回调回函,此方法在开发中也是非常实用的

实例生命周期钩子

生命周期:我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期

生命周期钩子的 this 上下文指向调用它的 Vue 实例,箭头函数并没有 this

var vm = new Vue({
  el: '#app',
  data:{
  	a: "hello"
  },

  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
});

控制台打印的结果:a is:hello

生命周期图例(先记录再慢慢理解):
image.png

image.png

模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析

在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

插值:

v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过

指令:

地址:https://cn.vuejs.org/v2/api/#v-text

v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{ msg }}</span>

v-html

v-show

v-if(条件渲染)

v-else

v-else-if

v-if

v-for

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<div id="app" >
      {{ a }}
      <!-- <a v-bind:href="url">百度一下</a> -->

       <input type="button" value="按钮" v-on:click="a+=1"/>
	  
	</div>



<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-bind

<a v-bind:href="url">...</a>

var vm = new Vue({
  el: '#app',
  data:{
  	// a: "hello",
  	url: "https://www.baidu.com/"
  }

在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

缩写示例:
<img :src="imageSrc">

  • 箭头函数绑定了父级作用域的上下文

问题:

如果你已经有一个现成的服务端应用,你可以将vue作为该应用的一部分嵌入其中

0

评论区