Vue是渐进式的JavaScript框架
多看中文文档()
前端框架和库(jQuery)的区别
功能上的不同
jquery库:包含DOM(操作DOM)+请求,就是一块功能。art-template库:模板引擎渲染,高性能的渲染DOM (我们后端的一种模板 跟python的模板类似)框架:大而全的概念,简易的DOM体验+请求处理+模板引擎在KFC的世界里,库就是一个小套餐,框架就是全家桶。
nodejs
- 去官网下载
- 打开终端cmd:执行 node -V 如果出现版本号代表node成功
- 使用npm
- 在cmd中找到自己要初始化化的项目路径
npm init --yes 会自动生成一个package.json文件
-
- 下载依赖包
npm install vue --save
npm install jquery --save
-
- 卸载包 npm uninstall vue -save
- 下载项目所有的依赖包 npm install
Vue的起步
- 引包
- 创建实例化对象
new Vue({el:'#app',//目的地data:{ msg:"hello Vue"}});/*{ {}}: 模板语法插值 { {变量}} { {1+1}} { {'hello'}} { {函数的调用}} { {1==1?'真的':'假的'}}*/
指令系统
//常用v-text v-html v-ifv-showv-forv-bindv-on 在vue中它可以简写: v-bind: :class 等价于 v-bind:class :src 等价于v-bind:src :id 等价于v-bind:id v-on:click 等价于 @click = '方法名'
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。//保存数组或者对象 格式v-for = '(item,index) in menuList'v-for = '(value,key) in object'//item指的是数组中每项元素//index指的是数组中的下标的索引
父组件向子组件传递数据:通过Prop
1.在子组件自定义特性。props:['自定义的属性1','自定义属性2'] 当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样 2.要在父组件中导入的子组件内部 绑定自定义的属性
例如:
父组件
import Vfooter from './components/Vfooter'
export default {
name:'app', data (){ return{ citys:[ "沙河","平西府","天通苑" ] },components:{
Vfooter,
}
}
</script>
子组件
{ {item}}
自定义方法
补充一个淘宝NPM: