web前端开发中关于Vue.js的一些注意点

    <script>
        var app = new Vue(
            {
                el: '#app',//vue框架作用于该app节点内(关联的作用)
                //数据区域   el,data,methods是固定写法。
                data: 
                {
                    accout: 'admin',
                    password: null,
                    face: 'images/default_face.png'
                },
                //方法区域    而内部的变量和方法名是可以随意取。
                methods: 
                {
                    showValue() 
                    {
                        alert(this.accout);
                    },

                    showImg(e) 
                    {
                        
                        var vueThis = this; //因为this只能被一级方法访问，如：showValue,showImg等，不能被这些方法的子方法直接访问
                                            //所以为了在function子方法中 使用this提取face变量进行更改，所以这里用一个变量临时保存
                                            
                        var v = e.target.files[0];   //得到用户选择的文件
                        var reader = new FileReader(); //把它转为base64编码
                        reader.readAsDataURL(v);       //开始对变量 v(更换的用户文件) 进行转码

                        reader.onload = function (r) //转码完成后，就执行这个方法，把更换的文件数据（base64)赋值给face变量
                        {
                            vueThis.face = r.target.result;
                        }
                    }
                }
            }
        )


    </script>

    <div id="app">
        <input type="text" v-model="accout">
        <button @click="showValue">点我弹出你的用户名</button>

        <img :src="face">  <!-- img:src 图片变量 后面选择后会变化 -->
        <input type="file" @change="showImg">
       
        
    </div>

el,data,methods是固定写法,而data,methods内部的变量和方法名是可以随意取。

1.el: ‘#app’, //vue框架作用于该app节点内(关联的作用)
2.data:{}， //数据区域
3.methods{}, //方法区域

在方法区域(methods)的方法的子方法中使用this调用数据变量

                showImg(e) 
                {
                    
                    var vueThis = this; 
                                        
                    var v = e.target.files[0];   //得到用户选择的文件
                    var reader = new FileReader(); //把它转为base64编码
                    reader.readAsDataURL(v);       //开始对变量 v(更换的用户文件) 进行转码

                    reader.onload = function (r) //转码完成后，就执行这个方法，把更换的文件数据（base64)赋值给face变量
                    {
                        vueThis.face = r.target.result;
                    }
                }

以上 var v = vueThis = this
因为this只能被一级方法访问，如：showValue,showImg等，不能被这些方法的子方法直接访问
所以为了在function子方法中 使用this提取face变量进行更改，所以这里用一个变量临时保存