当前位置：首页 > news >正文

郑州专业做网站公建站模板

news 2025/8/14 22:26:38

郑州专业做网站公,建站模板,前端做网站直播,四川炜航建筑公司网站vue简介 1.1.vue是什么?Vue官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/ vue是一套构建用户界面的渐进式javascript框架构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面前端工程师的职责:就是在合适的时候发出合适的请求,然后…

vue简介

1.1.vue是什么?
Vue官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

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

构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面
前端工程师的职责:就是在合适的时候发出合适的请求,然后将数据展现在合适位置
vue关注的就是你把数据给我,我怎么把它变成界面

渐进式:vue可以自底向上逐层的应用

接地气点说,如果你是一个简单的应用,那么只需要引入一个轻量小的核心库即可(这个库压缩完只有100多kb);如果你的应用是一个复杂的应用,可以引入各式各样的vue插件。也就是从一个轻量小巧的核心库逐渐递进到使用各式各样的vue插件库。

后起之秀,指的是vue之前有react,react之前有Angluer,尤雨溪也是参考了react写的好的部分。

Vue的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。

组件化：一个.vue文件就是一个组件,.vue文件是Vue打造的一个全新的文件格式,.vue文件中
写的就是HTML结构、css样式、js交互

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diﬀ算法,尽量复用DOM节点。

Vue官网使用指南

学习vue之前,先来看一下Vue官网顶部的导航区,vue团队为了让vue更好用,所以说写了些文档并且进行了分类形成了官网上方这个导航区。

教程、API最重要，学习过程中总要打开看的东西

教程：vue入门的文档，先不打开，下一节点vue小案例时打开看
API：在编码过程中遇到不会的可以查看API，不会就找API
风格指南：教你如何写出更优雅的vue代码，目前先不用通读，得等vue全部学完而且学的过程中也已经在慢慢渗透如何更好的编写vue代码
示例：官网给出的一些案例
Cookbook:编写vue代码的技巧

生态系统

工具和核心插件尤为重要
工具--->Vue CLI :最一开始学习时需要在HTML中引入vue.js才能编写vue代码,但是后续公司
中干活得借助于一个高端的平台来开发叫脚手架

搭建vue的开发环境

1.下载开发版本的vue

1. script 引入

引入本地文件 (初学者选择这种)
CDN引入线上文件 (CDN加速的意思)

2. npm 安装指令 (后续使用这种)

借助于 node.js
安装 nodejs、Vue的脚手架、搭建 vue项目

2.安装开发者调试工具

3.关闭浏览器F12的警告提示

初识Vue

<body><!-- 1：准备好一个容器 --><div id="app"><!-- 3:使用数据 插值表达式 --><p>Hello,欢迎来到{{name}}</p></div>
</body>
<!-- 引入了vue的 构造方法 -- 创建对象 -->
<script src="../js/vue.js"></script>
<script >// 2:创建vue 实例// vue实例 管控 id#app 所有的属性、数据var vm = new Vue({el:"#app", // el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ //data中用于存储数据,数据供el所指定的容器去使用。name:"齐鲁师范大学"}})
</script>

总结

数据绑定理解

Vue中有两种数据绑定方式:

1.单向数据绑定(v-bind):数据只能从data流向页面。
2.双向数据绑定(v-model):数据不仅能从data中流向页面,还可以从页面流向data中。

备注：

1) 双向绑定一般都应用在表单类元素上(如:input、select等)
2) v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

el与data的2种写法

el的2种写法:

new Vue时候配置el属性
先创建Vue实例,随后通过vm.$mount('#app')指定el的值。

var vm = new Vue({
el:"#app", // el的第一种写法
data:{ //data中用于存储数据,数据供el所指定的容器去使用。name:"高数"
}
})
vm.$mount('#app');//el的第二种写法

data的两种写法:

对象式
函数式

var vm = new Vue({
el:"#app",
data:{ //data的第一种写法:对象式。name:"高数"
}
data:function(){//data的第二种写法:函数式
return{name:"高数"}
}
data(){//简化函数式return{name:"高数"}  
}
})

如何选择:目前哪种写法都可以,以后学到组件时,data必须使用函数式,否则会报错。