局域网下怎么访问自己做的网站,怎么做免费个人网站,关键词搜索工具有哪些,云栖建站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优秀的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 idapp!-- 3:使用数据 插值表达式 --pHello,欢迎来到{{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模板中都可以直接使用。 内置指令
