基础概念
vue的核心是一个vue对象,在这个对象内我们一直加入别的对象进行管理。
vue内部选项讲解
el
HtmlElement就是指定一个dom元素用来挂载vue实例的。el :'#app'
data(防止数据散落在业务逻辑内难以维护)
支持在外部使用变量方法声明:Data :myData ;
var myData ={a:1,b:2}
生命周期(vue的生命周期钩子可以参考Jquery的ready()函数)
{{}}(包括使用过滤器对数据的格式处理)
用于输出属性的值,还可以使用一些简单的表达式进行运算,如果想要将输出的标签展示请使用v-html=' '
过滤器的第一个参数是数据本身
指令
指令的主要作用是,当表达式(v-)的值变化时,将某些行为应用到dom元素上。数据驱动dom是vue的核心理念所以不到万不得已不要手动操作dom。vue为我们提供了大量的指令来操作dom例如循环渲染,显示与隐藏等。
v-bind
用来绑定href,srcd等属性
v-on
用来绑定点击事件
安装vue(包括vue-cli脚手架)
https://segmentfault.com/a/1190000011275993?utm_source=tag-newest
创建项目
在自己选好的目录下shift+右键打开命令行工具
创建自己的vue项目:vue init webpack-simple my-project -------simple用vue提供的简单模板,命名成自己的项目名字
安装项目需要的依赖:npm install --------会自动导入一些包(类似maven下载依赖包)
打开项目:npm run dev
项目目录讲解
https://blog.csdn.net/chao2458/article/details/81284522
使用vue-router
单页面应用构建步骤:添加Vue Router=> 组件映射到路由=>告诉 Vue Router 在哪里渲染它们。
https://router.vuejs.org/zh/guide/#html
import Vue from 'vue'
import App from './App.vue'
//引入路由
import VueRouter from 'vue-router'
//1导入需要的组件
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'
Vue.use(VueRouter)
// 2. 定义路由,每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器, 或者,只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置, 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
mode:'history',
routes
})
// 4. 创建和挂载根实例。 记得要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
new Vue({
router,//注意书写规范
el: '#app',
render: h => h(App)
})
5<!-- 路由出口,
路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
使用axios
参考网址
axios: https://github.com/axios/axios
vue-axios: https://www.npmjs.com/package/vue-axios
qs: https://www.npmjs.com/package/qs
配置全局变量
webpack.config.js配置端口
devServer:
port:'8082'
main配置常规变量
Axios.defaults.baseURL = 'http://localhost:8080'
Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
Axios.defaults.withCredentials = true
参考文档使用发送请求
使用Vuex
用来管理组件间的状态
使用element-ui
参考安装地址
https://element.eleme.cn/#/zh-CN/component/installation
1.确认style-loader!css-loader是否下载,如果下载,是否在config文件中进行了配置
配置文件如下:
{
test: /\.css$/,
loader: 'style-loader!css-loader',
exclude: /node_modules/
}
但是这样仍然无法正常运行的,因为在elment-ui中css中运用了饿了么的字体库,即.wtff文件,这导致任然缺少一个解析器,即url-loader
npm install url-loader/cnpm install url-loader -D
然后再配置文件中,加上
{
test: /\.(woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader'
},
常用知识
1主页面里引入别的页面
<template>
<div id="app">
<First :prop-name="a">
</First>
</div>
</template>
<script>
//导入具体的组件的地址
import First from './components/First.vue'
export default {
name: 'app',
components:{
//具体的组件
First
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
a:'wang ba dan'
}
}
}
</script>
属性传参
<script>
export default {
name: 'first',
props:['propName'],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
路由跳转方法
链接跳转
<router-link to="/foo">Go to Foo</router-link>
按钮跳转
<button @click="gotoByUrl('/foo')">Go to Foo</button>
gotoByUrl(url){
this.$router.push(url);
}