Vue学习-day01

最新推荐文章于 2022-10-16 22:50:36 发布

Jing.F.Y

最新推荐文章于 2022-10-16 22:50:36 发布

阅读量115

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/EVANandJ/article/details/111573225

版权

序言.Vue.js 介绍

Vue.js 是一个渐进式JS 框架

体积小

压缩后只有33k
更高的运行效率

Vue.js 基于虚拟dom，一种可以预先通过js进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作是数据预处理操作，没有真实操作DOM，所以叫做虚拟DOM
双向数据绑定

让开发者不用去操作dom对象，把更多的精力投入到业务逻辑上
生态丰富，学习成本低

市场上拥有大量成熟、稳定的基于Vue.js的ui框架、常用组件。且对初学者友好

第一节.Vue.js的安装和部署
当部署完Vue.js后，要声明在一全局函数Vue()，用new Vue()的方式声明（可以把他想成构造函数的性质）
在htmll 文件中运用script引入（cdn引入）
- 可以引入开发版本（包含了警告信息）
- 或者引入生产版本（删除了警告和提示信息）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
使用cli 创建

第二节.创建第一个Vue项目

Vue的核心是采用简洁的模板语法来声明式的方法就数据渲染进DOM系统

每一个Vue的应用都是有Vue函数创建一个Vue实例开始的，通常我们会用一个变量来接受Vue实例后的结果

------视图
<div id="app">
  {{ message }}
</div>

------js脚本
//当部署完Vue.js后，要声明在一全局函数Vue()，用new Vue()的方式声明
	//new Vue()声明后要传入两个重要的参数 
	//el:元素，用于和视图中的元素关联  data:数据，用于注册和保存在视图中使用的数据，并且对数据初始化赋值


var app = new Vue({     //此时的app就是new Vue() 返回的一个vue对象
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

第三节.Vue实例中的数据属性(data)和方法()

Vue实例是指 new Vue({ }) 我们通常会用一个变量来接受Vue 实例

数据和方法就是指Vue当中的方法和数据

当一个Vue 实例（vue.js其实就是一个构造函数）被创建后，他会将data对象中所有属性加入当vue的响应式系统中，当他的属性改变时，视图中的数据也会发生相应的改变，这就是响应式改变

//1.data数据属性，数据属性可以响应式更新数据
<body>
    <div id="app">
        {{a}}
    </div>

<script>
    var data1 = { a : 1} ;
    // Object.freeze(data);  可以通过Object.freezel()阻止响应式修改
    var vm = new Vue({
        el   : "#app",
        data : data1  //因为data是vue的属性，且这个属性用于保存数据，一般用象存放
    });
    data1.a = "2"; //当data中的值改变时视图中的值也会响应式改变，可以通过Object.freezel()阻止改变
    if(vm.a === data.a){  //可以直接用vm.数据来取值
        console.log("turn")
    }
</script>

//2.除了数据data属性，还有Vue实例还有很多有用是属性和方法，他们以$开头用于区分用户定义的属性和方法
<body>
    <div id="app">
        {{a}}
    </div>
<script>
    var data1 = { a : 1} ;
    var vm = new Vue({
        el   : "#app",
        data : data1  
    });
	//因为data 和el 都是Vue实例化的属性和方法，所用要用$来区分
	vm.$data === data1 //--->t turn
	vm.$el === document.getElementById("app")
	
	//$watch()方法用于监听一个数字的改变，会观察一个数据的变化，并记录改变前后的值，两个参数，
	//参数1：要监听的data中值
	//参数2：一个回调函数，回调函数有两个参数（参数一:改变后端值,参数2：改变前的值，）
	vm.$watch('a',function(newVal,oldVal){
        console.log(newVal,oldVal)
    });
</script>

Jing.F.Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习-day01

序言.Vue.js 介绍Vue.js 是一个渐进式JS 框架以后在学体积小压缩后只有33k 更高的运行效率 Vue.js 基于虚拟dom，一种可以预先通过js进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作是数据预处理操作，没有真实操作DOM，所以叫做虚拟DOM 双向数据绑定让开发者不用去操作dom对象，把更多的精力投入到业务逻辑上生态丰富，学习成本低市场上拥有大量成熟、稳.
复制链接

扫一扫