您的位置 首页 > 数码极客

VUE那个气泡如何发出声音的

大家有什么想要了解的或者学习的,欢迎大家留言,我会整理好发出来大家一起讨论,共同进步。

vue是一个轻量级框架,与其他重量级的框架不同的是,vue采用自底向上增量开发的设计。使用vue只需要关注视图层,不过使用起来让我感觉最不错的是vue的响应式数据绑定和组合试图组件。

1.响应式数据绑定例如:


通过v-model指令,我们把msg数据绑定到了input文本框,当我们修改文本框的值,发现msg数据随着input值的改

2.组合试图组件例如:

组件可以扩展 HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素。如果是一个大项目的话,页面中的DOM节点会有很多,页面加载就会缓慢,这时vue.js在2.0版本中引入了虚拟DOM(virtual dom)。可以使性能有所提升(前提是页面存在很多DOM节点的情况)。

2.1可以用 Vue.extend() 创建一个组件构造器:


要把这个构造器用作组件,需要用 Vue.component(tag, constructor) 注册(这个注册是全局的):

//全局注册组件,tag 为 my-component

Vue.component('my-component', MyComponent)

vue.js的使用?

vue.js的开发环境我使用的是webstrom。vue的环境搭建首先要安装node,借助node里面的npm来安装需要的依赖等等,网上教程很多而且按照步骤安装就可以了,就不说了。相信你在安装的时候肯定遇到了npm

install vue-cli -g命令。那这到底是什么意思呢?

Vue-cli是什么?

它是一个vue.js的脚手架工具。就是一个自动帮你生成好项目目录,配置好Webpack,以及各种依赖包的工具。 -g是全局安装,这就表示打开命令行之后可以直接通过vue命令调用它。

项目搭建

项目目录结构的作用?

build 目录是一些webpack的文件,配置一些参数,一般不动。

config 是vue项目的基本配置文件

node_modules 是项目中安装的依赖模块

src 源码文件夹,基本上文件都应该放在这里

------assets 资源文件夹,里面放一些静态资源

-------components 这里放的都是各个组件文件

--------A A组件

---------main.js入口文件

static 生成好的文件都会放在这个目录下(css、js等)

test 测试文件夹,测试都写在这里

.babelrc babelrc编译参数,vue开发需要babel编译

.editorconfig 编辑器配置文件

.gitignore 用来过滤一些版本控制的文件,比如node_modules 文件夹

index.html 主页

项目文件,记载着一些命令和依赖还有简要的项目描述信息

README.md 项目说明(介绍自己这个项目的)

其中要重点说一下一下几个文件:

1.文件。

dependencies:项目发布时的依赖

devDependencies:项目开发时的依赖

scripts:编译项目的一些命令

2.main.js

这里是入口文件,可以引入一些插件或静态资源,当然引入之前要先安装了该插件,在文件中有记录。

importVuefrom'vue'

importAppfrom'./App'

importrouterfrom'./router'//引入路由设置

importaxiosfrom'axios'

importElementUIfrom'element-ui'

import'element-ui/lib/theme-chalk;

import"babel-polyfill"

//引入echarts

importechartsfrom'echarts'

3.A

这是一个标准的vue组件,包含三个部分,一个是模板,一个是script,一个是样式

importHellofrom'./components/Hello'

exportdefault{

name:'app',

components: {

Hello

}

}

@import"../static/c;;

@import"../static/c;;/*深色主题*/

/*@import "../static/css/theme-green;; 浅绿色主题*/

4.web

在build文件夹下的web设置main.js为入口文件

vue.js实例中的参数

el: 'id' //el就是 vue 程序的解析入口

data: { 数据 } //data就是ViewModel

methods: { 函数 } //函数中的this指向该应用中data的数据

computed: { 声明一个计算属性函数 }

filters: { 过滤器函数 }


###跨域问题

解决办法:在服务端加入以下代码:

re("Access-Control-Allow-Origin","*");

re("Access-Control-Allow-Methods","*");

re("Access-Control-Max-Age","3600");

re("Access-Control-Allow-Headers",

"Origin, X-Requested-With, Content-Type, Accept");

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“VUE那个气泡如何发出声音的”边界阅读