博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue.js学习总结
阅读量:5842 次
发布时间:2019-06-18

本文共 2001 字,大约阅读时间需要 6 分钟。

下面使用的命令工具为git bash

使用命令行工具搭建vue.js项目

vue.js官网命令行工具安装

为了提升安装速度,建议将 npm 的注册表源

1.输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org,后续将使用cnpm代替npm进行安装

2.输入命令:cnpm -v,查看当前cnpm的版本号

3.输入命令:cnpm install -g vue-cli,给全局安装vue-cli,这样才能使用vue这个命令

4.输入命令:vue init webpack my-first-vue-project,创建一个基于webpack模板的项目,项目名为my-first-vue-project

5.输入命令:cnpm install,下载依赖,文件夹目录中多了一个node_modules

6.输入命令:cnpm run dev,将项目运行起来,服务启动起来,端口为8080http://localhost:8080

sublime可以下载vue syntax highlight插件来语法高亮.vue

vue.js实例中的重要选项

data:存储数据

methods:方法,内部可以使用this.属性名取data里面定义的数据

watch:监听数据的变化,与data中的数据对应

vue对象通过html指令将view层与model进行关联

重要的指令有:

v-text:渲染数据

v-if:控制显示

v-on:绑定事件

v-for:循环渲染

当页面每次编辑完保存时,vue的脚手架工具会自动将.vue的文件转换成浏览器能够识别的代码,并且实现热更新,不用刷新即可在页面上看到我们编辑完后的展示。

vue.js的watch监听:

举例:var obj = {a: '1',b: '2'};

   修改b的值:obj.b = '3';

   当watch的deep为true,则会触发监听的回调函数;但为普通监听的时候,则不会触发监听的回调函数 

vue.js的组件名最好使用短横线法:

因为在HTML中,标签的标签名是大小写不敏感的,而在javascript中变量名是大小写敏感的

换句话说,在HTML中,ComponentA和componenta算是同一个标签
而在javascript中,ComponentA和componenta却不是同一个变量
要解决这种差异问题,就必须得在两种标准之间做一个转换,所以vuejs的作者就实现了将驼峰法(camelCase)转换到短横线法(kebab-case)

vue.js组件之间如何通信

父组件向子组件传递数据:父组件是使用 props 传递数据给子组件

子组件向父组件传递数据以及非父子组件之间传递数据:情景为B组件使用A组件,在B组件使用A组件的地方用v-on:(A组件的$emit方法名)来监听A组件触发的事件,在A组件的事件中用this.$emit('B组件监听的事件名','传递的数据')来触发事件,给A组件传递数据

 

子组件componentA.vue
父组件App.vue

 选择vue.js的原因:

易用:定义一个dom,创建一个vue实例就可将数据model和视图dom联系起来,比较简单易学易用

灵活:渐进式(声明渲染——》分组件——》vue路由——》vue状态控制vuex——》build构建工具构建项目)

高效:16kb,超快虚拟DOM,最省心的优化

vue请求服务器端(vue-resource):

1.npm安装vue-resource

输入命令:npm i vue-resource --save-dev,安装vue-resource依赖

转载于:https://www.cnblogs.com/eyunhua/p/6536508.html

你可能感兴趣的文章
Firefox about
查看>>
Angular - - angular.element
查看>>
美图秀秀首页界面按钮设计(二)
查看>>
nginx安装及负载均衡配置
查看>>
JQuery this和$(this)的区别及获取$(this)子元素对象的方法
查看>>
tomcat不能多次startup.sh,异常时直接,分析logs目录下的日志。
查看>>
关于分区索引与全局索引性能比较的示例
查看>>
ASP.NET MVC学习之(5):Html.ActionLink
查看>>
yii_wiki_145_yii-cjuidialog-for-create-new-model (通过CJuiDialog来创建新的Model)
查看>>
431.chapter2.configure database mail
查看>>
同一页面中引入多个JS库产生的冲突解决方案(转)
查看>>
C语言之指针与数组总结
查看>>
沟通:用故事产生共鸣
查看>>
1080*1920 下看网站很爽
查看>>
topcoder srm 305 div1
查看>>
[转]ORACLE 异常错误处理
查看>>
c/c++处理参数
查看>>
Object.observe将不加入到ES7
查看>>
Android类参考---Fragment(一)
查看>>
Windows WMIC命令使用详解(附实例)
查看>>