Vue框架引入
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+优秀的Diff算法,尽量复用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必须使用函数式,否则会报错。
一个重要原则：
由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了，而是表示window。
MVVM模型
1. M：模型(Model) ：对应 data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象
观察发现:
- 1.data中所有的属性,最后都出现在了vm身上。
- 2.vm身上所有的属性及vue原型上所有的属性,在Vue模板中都可以直接使用。
内置指令
原文地址：https://blog.csdn.net/qq_64685283/article/details/140276761
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！