Vuejs学习笔记(一)

摘要:
1) vue.js的主要功能1。模板渲染2。模块化3。扩展函数:路由,Ajax 2)vue.js模板渲染的双向绑定示例消息绑定到输入对象。修改输入中的所有值后,上面P标记中显示的内容也会随之改变。3)app.vue、main.js和index.html的相关main.js是我们的入口文件,用于初始化vue实例并使用所需的插件。

1)    vue.js 的 主要功能

1、模板渲染

2、模块化

3、扩展功能:路由,Ajax

2)    vue.js 模板渲染之双向绑定示例

message 绑定到了 input 对象,所有在input中的值修改了之后,上面的P 标签的显示的内容也会根据其改变。

 Vuejs学习笔记(一)第1张

3)    app.vue 、main.js和 index.html的关联

(1) main.js是我们的入口文件,作用是初始化vue实例并使用需要的插件。

(2) App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

(3)index.html 是系统的启动界面

4)    实例选项、实例对象方法、实例对象指令的概念

(1)   实例选项

 Vuejs学习笔记(一)第2张

new Vue({ … }) 花括号之间的参数以及 export default { … }是实例选项,实例选项中的属性值会带到每一个实例中去,为了避免数据的污染,通常使用方法的来返回data 的值,而不是直接给它赋值

 Vuejs学习笔记(一)第3张

(2)   实例对象的方法

实例对象方法及属性:通过$开头的一些东西做引

(3)   指令:实现templete 和 实例之间的一些交互

5)    实例指令例子

(1)   v-text 和 v-html 渲染的区别

 Vuejs学习笔记(一)第4张

(2)     利用三目运算符渲染,根据status的值进行渲染

 Vuejs学习笔记(一)第5张

(3)     利用v-for 指令进行列表渲染

 Vuejs学习笔记(一)第6张

(4)   绑定标签属性v-bind,可以简写为 “:(冒号)”

 Vuejs学习笔记(一)第7张

 Vuejs学习笔记(一)第8张

(5)   条件渲染 之 v-if 和 v-show 的区别

 Vuejs学习笔记(一)第9张

v-if 是直接把渲染的html 标签给摘除掉,而v-show 则是利用了 display:none 属性

(6)   事件绑定 v-on 可以简写成“@”

v-on:click=“addItem”,例子如上图所示

@keydown.enter 是指keydown 的key是enter

 

(7)表单数据绑定 v-model

v-model.lazy 只有当输入完成触发 enter或unblur的时候才会触发数据同步和渲染

v-model.number 自动将字符串转换成数字

v-model.trim 自动过滤空格

 

6)    组件化的概念及简单实例


Vuejs学习笔记(一)第10张


首先在脚本中引入 hello 组件,然后实例化,最后在要显示该组件的地方通过hello 标签进行引入,hello 组件会在对应的标签处进行渲染

 Vuejs学习笔记(一)第11张

Vuejs学习笔记(一)第12张

Vue 实例对象,下面这段代码一般是要写在main.js中

new Vue({

      el:‘#app’,         //挂载点

      template : ‘<div>{{fruit}}</div>’,

      components :{ App } //组件

      data :{

        fruit:’apple’

     }

})

7)    三种组件的注册方法

(1)全局注册

 Vuejs学习笔记(一)第13张

(2)单文件组件

一个文件就是一个组件,必须加 default 文件名且文件名要与组件名要一致

 Vuejs学习笔记(一)第14张

引入方法:

 Vuejs学习笔记(一)第15张

(3)文件名和组件名不一致

 Vuejs学习笔记(一)第16张

引入方法

 Vuejs学习笔记(一)第17张

8)    Vue-cli 的安装及脚手架程序搭建

(1)、vue-cli 安装:npm install vue-cli -g

(2)、vue 初始化项目:vue init webpack my-project

(3)、npm install 安装项目依赖

(4)、npm run dev 启动测试服务器

(5)、npm run build 生成上线目录

免责声明:文章转载自《Vuejs学习笔记(一)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇服务发现系统etcd介绍Hyperledger Fabric1.4的多机部署下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue 点击图片获取x,y坐标值

点击图片拿到x,y值 template中 <image x="0"y="0"width="100%"height="100%"xlink:href="../../assets/images/background/bg_nav.png"@click="tapMap($event)" /> js中 tapMap(e) { //cons...

vue爬坑之路--------this$refs[formName]validate

vue element-ui使用自定义正则表达式: let validatePass = (rule, value, callback) => { let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/ if (value === '') { call...

Vue项目性能优化整理

 以下方式基于 @vue/cli 快速搭建的交互式项目脚手架 1. 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。 1 imp...

小谢第29问:Vue项目打包部署到服务器上,调接口就报js,css 文件404

1、publicPath路径的问题,先看下build之后的包确认下是不是publicPath路径配置的原因,有没有static这个文件夹,以及这个文件夹下边有没有这些404的js和css 2、history模式需要配置nginx支持 3、在dev环境下测试没有问题,但是npm run build后图片的路径找不到,对于图片路径的设置,只可以有以下三种方式...

vue路由懒加载及组件懒加载

一、为什么要使用路由懒加载   为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义   懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 三、使用   常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1、未用懒加载,vue中路由代码如下 import Vue from 'vue'...

vue里在自定义的组件上定义的事件

事件分为原生事件和自定义事件。 vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发。 这也是子组件向父传值的原理。 如果想作为原生事件,需要在原生事件后面加上.native 就可以了。然后就可以触发父级的fatherClick函数了。...