vue-app开发入门 _APP开发

幽映每白日，清辉照衣裳。这篇文章主要讲述vue-app开发入门相关的知识，希望能为你提供帮助。
vue的中文文档在这里
1. 简单地引用vue.js使用vue框架最简单的方式就是写一个html页面然后引用vue.js啦. 使用< script> 标签就可以将vue.js导入并且使用它来构建vue app了.

文章图片

这种方法是官方建议的, 像我这种新手当然也是使用这种方案的啦.
记录一些vue的模板语法相关链接

{{}} 双大括号绑定内容(类似于innerHtml )
v-bind 绑定属性 (el: v-bind:style="variable")
v-on 绑定事件 (el: v-on:click="onClick")
v-if 条件渲染 (el: v-if="bool")

< ul id="example"> < li v-for="(item, index) in items"> {{ index }} - {{ item.message }} < /li> < /ul>

v-model 输入数据绑定

< input v-model="model"> < p> Message is: {{ model }}< /p>

创建vue-app实例如果要使用vue的”插值语法”和vue的种种api, 则必须在HTML的js代码中建立vue实例.
模板如下:

var app = new Vue({ el: ‘#app‘, //vue实例的承载元素 data: {}, //数据 method: {}, //方法 computed: {}, //计算属性. 当插值时使用的数据需要过于繁琐的计算时, 使用计算属性. /* 生命周期钩子, 详见vue的文档 */ });

生命周期函数钩子
2.使用vue-cli构建vue-cli是个node的模块, 所以想要使用vue-cli, 首先需要配置node运行环境, 然后再使用npm安装vue-cli.
1. vue-cli构建vue-app的流程

使用内置的模板构建vue-app的项目
vue init webpack project-name
按需修改项目的详细信息
使用npm安装依赖
npm install --sava
项目开发码代码
测试
vue run dev
使用webpack打包项目
webpack

2. vue-app项目目录简要分析

index.html ———项目主页入口, vue-app实例的承载元素就在这里定义
src/ ——————项目的源码文件目录, 为项目写的所有的组件/js等代码都在这里
src/main.js ——-app的入口文件, 它将App.vue作为模板, 以index.html中的承载元素初始化Vue-app实例.
src/APP.vue ——app实例的主模板文件, 是整个vue-app最外层的总框架
src/components—模板目录, 原则上应该将所有的component都放在这里
src/assets ————不需要编译的资源放在这里
src/router —————路由目录. 如果初始化app时选择了route, 则会有此目录
src/router/index.js —路由配置文件. 在这里指定单页面应用的页面跳转
build/ —————webpack的配置文件就在这里, 记录了app的构建规则 webpack入门

3. vue模板 1. 模板的模板

< template> < !--HTML代码--> < /template> < script> //javascript代码 < /script> < style scoped> //CSS代码, 使用scoped属性能将这段style代码限制在此组件内部而不会影响外部 < /style>

2. 组件的构造方法在node中, 一个js文件就是一个模块, 使用 import 导入模块而使用 export 导出模块. 在vue中, 一个vue文件即包含了这个组件的view和controller, 而对于javascript来说, 这个vue文件就是一个js模块. 因此, 应该使用export 导出这个组件的对象实例, 这样才能在外部导入这个组件.
构造一个对象的实例和构造一个vue实例是类似的, 都 ~~需要指定html中的"承载元素"和~~ data等等属性.

export default { el:‘#component‘, data: function(){ return somedData; //注意, 一个组件的data应该是一个函数对象并且使用return返回data对象 } method: function(){} //somefunction }

3. 组件间的数据传递父组件-> 子组件
父组件传数据给子组件需要两步操作

在子组件中声明需要的数据并完成view和model的绑定;
父组件中将数据传给子组件

//子组件: < template> < div> < div> {{someText}}< /div> < div v-bind:style="{color : colorCode}"> This font-color should be setted by parent< /div> < /div> < /template> < script> export default { data(){ return { someText: "text" } } props: { colorCode: String//使用props声明子组件需要的数据(属性), msg是属性的"name", String用来指定msg值的类型 } } < /script> //父组件: < template> < div> < child v-bind:colorCode="#00aaff"> < /child> < /div> < /template> < script> export default { data: ()=> {}, component:{ child: require(‘componenets/child.vue‘) } } < /script>

子组件-> 父组件
子组件传递数据给父组件可以有多种操作.

子组件使用将数据封装到组件实例并使用 export 导出
子组件使用”事件发射器(emit)”以”事件”的方式传给父组件

4. 组件间的事件传递

子组件捕获事件, 子组件处理父组件捕获事件, 父组件处理子组件捕获事件, 父组件处理父组件捕获事件, 子组件处理

前两种的事件处理直接在script里将事件”消费”掉即可; 而后两种则需要使用不同的方式分别处理.
- 子组件到父组件
使用”事件发射器(emit)”, 子组件捕获事件并将其”发射”给父组件, 由父组件处理
- 父组件到子组件
在 vue 1 中, 有 dispatch() 和 broadcast() 将父组件的事件分发给子组件, 而在 vue 2 中, 上述两个方法已经被弃用, 取而代之的是状态管理层Vuex. 详见

//子组件 < template> < div> < input type="text" v-model="msg" v-on:change="onInput"> < /div> < /template> < script> export default{ data(){ return { msg: ‘请输入值‘ } }, methods: { onInput: function () { if (this.msg.trim()) { this.$emit(‘customedEvent‘, this.msg); //第一个参数是"发射"给父组件的事件名称, 第二个参数是事件的附加参数. } } } } < /script> //父组件 < template> < div> < child v-on:customedEvent="recieveMessage"> < /child> < /div> < /template> < script> export default{ components: { child: require(‘components/child.vue‘), }, methods: { recieveMessage: function (text) { alert(text); } } } < /script>

注意事项1. 每一个组件的最外层只能有一个根元素(template不是一个元素)
【vue-app开发入门】