<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue"></script>
<title>vue练习</title>
</head>
<body>
<div id="lx">
<a href="#">{{message}}</a>
<!--只执行一次插值，数据改变不更新-->
<p v-once>{{message}}</p>
<!--计算属性-->
<p>{{reversedMessage}}</p>
<p v-html="yhtml"></p>
<p>{{yhtml}}</p>
<!--DOM属性绑定-->
<p><span v-bind:title="message">属性绑定</span></p>
<!--属性绑定提供完全的js表达式支持-->
<p><span v-bind:title="message + 1212">属性绑定</span></p>
<!--if判断(可以使用！)-->
<p v-if="!vuif">现在看到了</p>
<!--for循环-->
<ul>
<li v-for="item in vulist">{{item}}</li>
</ul>
<ol>
<li v-for="item in vulists">{{item.text}}</li>
</ol>
<!--使用v-on绑定DOM事件监听-->
<button v-on:click="reverseMessage">逆转消息事件</button>
<!--v-model实现输入框双向绑定-->
<input type="text" v-model="message">
<p><todo-item v-for="item in vulists" v-bind:todo="item" v-bind:key="item.id"></todo-item> </p>
<p>{{vuobj.a}}</p>
<form v-on:submit.prevent="onSubmit">
<input type="submit">
</form>
</div>
</body>
<script> //数据接收
var data = {
id: 1,
message: 'hello vue!',
yhtml:'<a>输出原HTML</a>',
vuif: false ,
vulist: [
'a','b','c'
],
vulists: [
{text: '学习开始'},
{text: '学习中。。。'},
{text: '学习结束'}
],
vuobj:{
a:'a1',
b:'a2'
}
}
//组件化注意是顺序
Vue.component('todo-item',{
props: ['todo'],//类似于一个自定义属性
template: '<li>{{todo.text}}</li>'
});
//vue初始化
var app = new Vue({
//绑定的元素
el:'#lx',
//数据
data:data,
//方法
methods:{
reverseMessage: function(){
this.message = this.message.split('').reverse().join('');
},
onSubmit: function(){
console.log('submit');
return false;
}
},
//计算属性(防止模板逻辑过重且难以维护)
computed:{
reversedMessage: function(){
return this.message.split('').reverse().join('');
}
},
//数据的监听
watch: {
//在app.message改变是触发
message: function(val,oldval){
console.log('new: %s, old: %s', val, oldval);
}
},
//实例创建之后触发
created: function(){
console.log('message is ' + this.message);
}
}); </script> </html>
vue使用ajax时：
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
Get 请求：
this.$http.get('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('请求失败处理'); });
post 请求：
this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); });
VUE安装：使用vue脚手架
vue-cli3的安装：
npm install -g @vue/cli 安装之后，就可以在命令行中访问 vue 命令。
创建项目两种项目：
1、vue create 文件英文名
2、图像化界面创建：
vue ui会打开浏览器窗口
Vue-cli3 项目配置 Vue.config.js
视频学习：http://www.bjsxt.com/down/9193.html
只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
npm run build打包文件
npm run serve运行项目
vue-element-admin文档
vue的端口不固定：是因为portfinder版本的问题
版本降级：npm install portfinder@1.0.21
1、默认是使用mock的模拟数据，如果不使用的话：注释掉
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// proxy: {
// // change xxx-api/login => mock/login
// // detail: https://cli.vuejs.org/config/#devserver-proxy
// [process.env.VUE_APP_BASE_API]: {
// target: `http://127.0.0.1:${port}/mock`,
// changeOrigin: true,
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: ''
// }
// }
// },
// after: require('./mock/mock-server.js')
},
main.js页面不使用mock；也可以带着，这里不影响；
2、接口的使用 src/utils/request.js修改 配置axios
修改返回数据的结果判断
3、注意本地使用的sockjs报错的原因，可能是因为本地其他项目使用过
比如vscode右键页面的原因