<!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右键页面的原因