vue.js的学习

<!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文档

https://panjiachen.github.io/vue-element-admin-site/zh/guide/

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