vue 是目前比较火的一个前端单页框架, 简单容易上手
一个简化版的项目只需要 4 个组件即可
vue + vue-router + vuex + axios
vue: 自身负责全盘内容
vue-router: 负责页面的切换
vuex: 负责全局的变量的存储和读取
axios: 负责和 API 服务器进行 REST 接口的交互
以下的内容需要有一定前端基础才方便理解
前序步骤: 使用 webpack 打包模式来开发 vue, 没有直接使用引入 vue 文件的方式来开发, 需要安装 Node.JS,vue-cli
Node.JS 是运行测试环境的基础
vue-cli 是使用模板创建 vue 项目的工具
1: 安装成功后初始化项目: vue init webpack myproject
一个 vue 文件主要包含三个部分, 模板, JS,CSS
- <template>
- </template>
- <script>
- </script>
- <style>
- </style>
template 部分是存放 html 代码的地方, 只有一个根元素, 可以用 div 来包裹起来
script 是 JS 脚本的地方, 一般以 export default {}的形式出现, 具体 vue 的 JS 代码都写在大括号里面
style 是写 CSS 的地方, 支持 SCSS 和 Sass, 但 SCSS 是主推使用.
在 template 里面主要常用的两个内容, 都是在 export default {}里面的内容, 一个是 data 数据, 一个是 method 方法.
- data () {
- return {
- myDataName:'',
- myValue:''
- }
- }
使用的方式有两种, 一种是属于 content 类的的, 不是 HTML 的元素, 使用的是{{myDataName}}; 另外一种是属于在 HTML 元素属性里的, 需要使用 v-bind: 或者缩写: 的形式才能使用, 并且不需要使用大括号, 例如
- <input :value="myValue">
- // 缩写
- <input v-bind:value="myValue">
- // 全写 # 双向绑定
这个是单向的, 即只能从 JS 修改后在页面显示
如果需要双向的 (即页面上更改的值会引发 JS 里的值更改) 需要使用 v-model:value="myValue", 这样 input 的值修改会让 JS 里对应的变量一个更改
条件渲染:
- <h1 v-if="表达式">
- 内容
- </h1>
- <h1 v-else>
- 内容
- </h1>
- v-el-if="表达式"
- <template v-if="表达式">
内容
</template>
列表渲染:
- <template v-for="item in items">
- <p>
- {{item}}
- </p>
- </template>
- -
script 里面的常见的内容有:
- <script>
- export default {
- el:''#myId' :
- data:{}// 数据
- methods:{}// 绑定的方法
- created:function(){}// 生命周期事件, function 里面 this 指向 vue 实例, 还有 mounted,updated,destroyed 都是生命周期事件
- filters:{}// 定义过滤器
- watch:{}// 定义需要跟踪的属性和执行的事件
- components:{}// 注册局部组件
- }
- </script>
事件绑定
使用 v-on: 或者缩写 @, 例如绑定点击事件 @click="myMethodName"
- br/>v-on:click="myMethodName"
- @click="myMethodName"
myMethodName 需要在 methods 里面声明 mailto:br/>v-on:click=
生命周期回调方法
会在这个 vue 组件的生命周期里触发, 常用的有
created,mounted,beforeCreated 等
过滤器
用来对数据进行再一次处理, 比使用 methods 里的方法书写更为简洁直观, 需要在 filters 中先声明一个方法, 然后在 template 里面使用
{{属性名 | 过滤器名}}
可以多个过滤器串联:{{属性名 | 过滤器 1 | 过滤器 2}}
计算属性
在 template 使用, 和 data 里的值使用类似, 但 computed 属性可以再执行一些内容.
使用子组件
使用子组件的方式可以让代码更好的复用, 即一个子组件可以在多个 vue 文件中直接引用使用.
1: 在父组件中先引入子组件的 vue 文件
import MyComp from './mycomp.vue'
2: 在父组件的声明的 compentents 中添加 MyComp
componetents: {MyComp}
3: 在父组件中使用
<MyComp/> 这里的名字需要和 componentns 里的一致, 否则会出现找不到组件的提示
4: 给子组件传值, vue 设定传值只能是单向的, 子组件不能直接对父组件传进来的值进行修改
<MyComp :myPropName="fatherDataName"/>
5: 在子组件中声明 props 来接收父组件传入的值
props:['myPropName'] 这个方式不是推荐的写法, 这里不详细叙述.
当需要在子组件更改父组件的值时: 通过事件进行传递
1: 在父组件里
- <MyComp v-on:myEventName="fatherMethod" />
- methods: { fatherMethod (myData) {} }
2: 在子组件的方法中使用
this.$emit('myEventName', data)
使用 slot 来进行动态更改组件里的内容
当组件里部分内容需要动态更改时, 可以使用 slot 标签
1: 在子组件里需要替换内容的地方书写 < slot></slot>
2: 在父组件引用子组件的地方:
- <MyComp>
- <div>
- 这里是替换的内容
- </div>
- </MyComp>
- vue-router:
因为是单页应用, 所以 location 里的地址前缀不会更改, 更改是后缀, 默认使用 #来分隔, 此时 router 可以对路径进行划分, 然后显示对应的组件内容
1: 在声明 vue 实例的地方引入 vue-router, 然后构造一个带有页面地址和组件的 router 对象, 插入进 vue 实例里面即可
2: 在模板需要使用路由内容的地方写上 < route-view/>
- const router = new VueRouter({
- routes: [
- {
- path: '/user/:id', component:MyComponent
- }
- ]
- })
路由里还有路由守卫, 用来控制能否跳转显示, 多用于权限控制
vuex: 用来保存全局变量, 主要有
state: 主要存储变量的地方
action: 用作异步更改 state
mutation: 用作同步更改 state
getter: 用来读取 state, 同时可以做一些操作, 和计算属性类似
...mappedStated 方法: 用来全部绑定 state 里的值到组件的计算属性中, 简化书写代码.
- const store = new Vuex.Store({
- state:{
- },
- actions:{
- },
- mutations:{
- },
- getters:{
- }
- })
还可以对全局变量进行分模块管理, 这里不详细叙述
axios2 : 用作异步请求 API
如果不使用中转的, 则需要 API 使用跨域设置, 否则会报调用错误
使用 JWT 的方式进行 API 的调用.
部署
项目开发完成后, 使用 NPM run build 即可打包出一份静态页面代码
此时这份代码可以直接部署在 nginx 上, 调用的 API 地址如果不进行跨域, 则在 nginx 上配置一下转发即可.
mailto:br/>v-on:click=
源码可以到
mailto:br/>v-on:click= https://github.com/18588733917
上查看
vue 实战
来源: http://www.bubuko.com/infodetail-2985422.html