vue是什么?
中文官网:https://cn.vuejs.org/
渐进式javaScript
渐进式:vue全家桶其实包含甚多的vue的扩展插件
vue :核心库
vue-cli:vue脚手架
vue-resource:ajax请求(axios)
vue-router:路由
vuex:状态管理
element-ui:基于vue的组件库
你可以一步一步有阶段性地来使用vue,如果是简单应用,只需要一个核心库就可以,100KB左右。复杂应用可以按需加载各种各样的插件,这就是渐进式。
React:组件化和虚拟DOM技术
Angular:模板和数据绑定技术
vue的特点:
1.遵循MVVM模式,无需操作DOM来更新视图。(我们只需要关心如何获取数据,如何处理数据,将处理好的数据交给vue,Vue会自动将数据渲染到页面中)
2.编码简洁 体积小,运行效率高
3.可以轻松引入一些第三方库和vue插件。
1.下载安装:
第一种:传统的引入方式,下载vue.js文件,在页面中引入
第二种:使用vue-cli脚手架导入使用。(后面再学习)
前期学习以第一种方式为主。
cdn:https://www.bootcdn.cn/vue/2.6.14/
2.将vue.js引入到当前页面
3.创建vue实例对象。
4.指定vue实例对象的控制区域
5.指定vue实例对象的配置信息
el的作用:控制区域是哪个 告诉vue的实例对象,将页面中的哪一块区域作为模板页面进行解析。
模板页面:HTML+JS组成的
<div id="app">
<!-- hello,{{10+20}} -->
<input type="text" v-model="msg">
{{msg}}
</div>
<div id="dd">
<input type="text" v-model="msg">
{{msg}}
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
// el的值 可以是css选择器,也可以是元素节点
// el:document.getElementById("app")
// 控制区域是哪个
el:"#app",
//为模板页面提供数据
data:{
msg:"芜湖起飞"
}
});
var vm = new Vue({
el:"#dd",
data:{
msg:"小米"
}
})
</script>
js以什么形式(语法)存在呢?
· 指令:vue自定义的标签属性 例如:v-model
· 插值表达式:动态显示数据。只能写在文本标签的内部。 例如:{{}}