从零起步学VUE

文章目录

  • 简介
  • 安装vue
  • 基础语法

官网: https://cn.vuejs.org

简介

从零起步学VUE_第1张图片
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式js框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

安装vue

引入vue.js的两种方式:

  1. vue下载后跟js一样保存到项目下,直接用 script标签引入
    下载地址:https://cn.vuejs.org/v2/guide/installation.html
    vue.js
  2. CDN引入vue.js
  • 对于制作原型或学习,你可以这样使用最新版本:

  • 对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:

  • 如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:

基础语法

引入vue后,vue会被注册为一个全局变量
vue

  • 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。
    从零起步学VUE_第2张图片
  • 当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
var data = {
      a: 1 }

var vm = new Vue({
         // 该对象被加入到一个 Vue 实例中
  data: data         //第一个data是vm的属性,第二个data是上面创建那个对象
})

vm.a == data.a // => true

// 设置 property 也会影响到原始数据
当设置 vm.a = 2 ,data.a 也就成了2

// 反之设置data的数据,vim改变亦然
当设置data.a = 3,vm.a 也成了 3
  • 值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property,你创建或者修改它的值不会触动视图“响应”效果,所以如果你知道你会在晚些时候需要一个 property,但是一开始它为空或不存在,那么你仅需要设置一些初始值
  • Object.freeze(),会阻止修改现有的 property,也意味着响应系统无法再追踪变化
var obj = {
     
  zoo: 'bar'
}

Object.freeze(obj)

new Vue({
     
  el: '#app',
  data: obj
})
<div id="app">
  <p>{
     {
      zoo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="zoo = 'baz'">Change it</button>
</div>
  • 除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来
var data = {
      a: 1 }
var vm = new Vue({
     
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 观察一个变量变化的过程,并且获取变化之前和变化之后的值
vm.$watch('a', function (newValue, oldValue) {
      // 回调函数
  console.log(newValue,oldValue);
})
  • vue的生命周期
    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 指向调用它的 Vue 实例,示例如下:
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{
     {
     msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
     
	el : "#app",
	data : {
     
		msg : "hi vue",
	},
	//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
     
		console.log('beforeCreate'+this.msg);
	},
	/* 在实例创建完成后被立即调用。
	在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
	然而,挂载阶段还没开始,$el 属性目前不可见。 */
	created	:function(){
     
		console.log('created'+this.msg);
	},
	//在挂载开始之前被调用:相关的渲染函数首次被调用
	beforeMount : function(){
     
		console.log('beforeMount'+this.msg);

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
     
		console.log('mounted'+this.msg);
	
	},
	//数据更新时调用
	beforeUpdate : function(){
     
		console.log('beforeUpdate'+this.msg);
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
     
		console.log('updated'+this.msg);
			
	}
});
//js中的定时函数  4秒后执行
setTimeout(function(){
     
	vm.msg = "change ......";
}, 4000);
</script>

生命周期图:
从零起步学VUE_第3张图片

你可能感兴趣的:(基础类,vue)