脚本
安装vue支持
npm install vue
创建项目
vue create my-project
# OR
vue ui
路径
public
存放一些公共的资源，比如图片，在引用的时候以/开始，例：
在public下的logo.png：/logo.pngsrc
存放静态资源，一般js、css文件放在这里，在引用的时候以./开始，例：
在src下的index.css：./index.css
指令
- v-once
通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
<span v-once>{{msg}}</span>
- v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
- v-bind
绑定html标签属性
<div v-bind:style="style">center</div>
var data = {
style: 'text-align:center'
}
方法
_.debounce
_.debounce是一个通过 Lodash 限制操作频率的函数。v-model
你可以用
v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
组件
- component
- prop
传入数据到组件中
- babel
参考文档
依赖
vue-router
- props传值
{
path: '/contract/edit',
name: 'contract-edit',
component: ContractEdit,
props: {
title: '合同信息录入'
}
}
vue-axios
element-ui
- 安装
npm i element-ui -S
- 引入
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
使用Axios
vue+element系统搭建：https://www.kancloud.cn/iiplay/vue-element
配置
vue.config.js
vue.config.js配置项：https://cli.vuejs.org/zh/config/#vue-config-js
webpack.config.js
其中vue.config.js中的devServer与webpack中的一样，可参考
webpack.config.js配置项：https://www.webpackjs.com/configuration/dev-server/
跨域
- vue.config.js
module.exports = {
publicPath: '',
devServer: {
host: 'localhost',
port: 9090,
proxy: {
'/api': {
target: 'http://localhost:9000',
changeOrigin: true
}
}
}
}
- axios
请求地址不能加ip和端口，因为在配置里已经做过代理，如果再加上请无法请求到
axios.get('/api/person/list.json')
.then(response => {
console.log(response)
})
.catch(err => {
console.log('yiva ' + err)
})
