vue学习(一)

1.vue是用于构建用户界面的渐进式js框架,自底向上逐层的应用:

简单应用:只需一个轻量小巧的核心库;

复杂应用:可以引入各式各样的vue插件;

2.vue特点:

采用组件化模式,提高代码复用率,更好维护(一个vue文件包含html css js,就是一个组件)

声明式编码,编码人员无需直接操作dom,提高开发效率

使用虚拟dom+优秀的diff算法,尽量复用dom节点

3.官网地址:cn.vuejs.org

风格指南:代码风格指南,个人习性写法差异参考

cookbook:编码技巧

团队:一些插件,代码例子

4.初始vue

创建vue实例,传入一个配置对象(指定容器)

vue实例和容器一一对应

容器代码依旧符合html规范,只不过混入特殊vue语法

data数据改变,页面用到data的地方自动变

5.vue模版语法两大类

插值语法:

功能:解析标签体内容

写法:{{xx}} xx要写js表达式,xx自动读取到data所有属性

指令语法:

功能:解析标签(包括:标签属性,标签体内容,绑定事件.......)

写法:v-bind:href="xx" 简写为 :href="xx", xx要写js表达式,xx自动读取到data所有属性

PS: vue中有很多指令 形式:v-????

6.vue中有两种数据绑定方式

v-bind:数据只能从data流向页面

v-model 数据双向流通 简写形式 v-model="name"

7.关于el 和 data

el除了初始化配置,也可以后续通过vue实例vm.$mount('#root')指定

data除了对象示,也可以使用函数式:data(){

...

return{name:'china'}

}

8.vue设计参考mvvm,v不仅可以使用data里面的,也可以使用默认vm里面的数据

相关推荐
Xudde.3 分钟前
班级作业笔记报告0x04
笔记·学习·安全·web安全·php
晓晓hh20 分钟前
JavaSE学习——迭代器
java·开发语言·学习
kyriewen111 小时前
你点的“刷新”是假刷新?前端路由的瞒天过海术
开发语言·前端·javascript·ecmascript·html5
421!1 小时前
GPIO工作原理以及核心
开发语言·单片机·嵌入式硬件·学习
摇滚侠2 小时前
JAVA 项目教程《苍穹外卖-12》,微信小程序项目,前后端分离,从开发到部署
java·开发语言·vue.js·node.js
AI成长日志2 小时前
【笔面试算法学习专栏】双指针专题·简单难度两题精讲:167.两数之和II、283.移动零
学习·算法·面试
小手指动起来3 小时前
保姆级提示词工程学习总结(含实操示例+工具推荐)
人工智能·学习·自然语言处理
skywalk81633 小时前
Kotti Next的tinyfrontend前端模仿Kotti 首页布局还是不太好看,感觉比Kotti差一点
前端
绛橘色的日落(。・∀・)ノ3 小时前
Matplotlib实践学习笔记
笔记·学习
chase。3 小时前
【学习笔记】AGILE:把人形机器人强化学习从“玄学”变成“工程学”
笔记·学习·敏捷流程