Vue框架引入

news2024/9/20 18:29:04

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必须使用函数式,否则会报错。