练习使用Vue-1

虽然主要写后端,但临时要用到Vue

简单使用Vue

const app = new Vue({ 
        el: '#app', //id选择器
        data: {         //数据 里面可以使用数字数组字符串和json对象等 
          phonenumber:'',
        }, 
        methods: {//方法
            postTemp(){
                axios.post('/url', {     
                 name: 'admin',     
                 password: '123' 
                }).then(resp=>{    console.log(resp.data);}) 
            } 
        }, 
        watch: {}, //监视器
        created() { //页面加载完成时执行的方法与vue生命周期有关
        } 
    })

遍历集合和插值表达式

遍历数组

• vue中使用v-for实现数组的遍历，格式:v-for=”(item,index) in items”
• items为集合,value为值,index为索引

遍历map

• v-for除了可以遍历数组，也可遍历Map,格式:v-for=”(value,key,index) in items”
• items为集合,value为值,key为键,index为索引

插值表达式

• 差值表达式 拼接字符串 <a :href="'single.html?id='+user.id"></a> 其中的冒号为属性绑定的简写

发送异步请求

//执行get请求 
axios.get('/url?name=admin&password=123').then(resp=>{    console.log(resp.data);}) 
//执行get请求参数比较多的时候 
axios.get('/url',{     
    params:{         
        name: 'admin',         
        password: '123'     
    } 
}).then(resp=>{console.log(resp.data);}) 
//执行post请求 
axios.post('/url', {     
    name: 'admin',     
    password: '123' 
}).then(resp=>{    console.log(resp.data);}) 
// 其他语法 
axios.put(url[, data[, config]]) 
axios.delete(url[, config])

遇到的问题

无法在方法用普通的js语法为对象赋值

如果data中的对象使用{}初始化那么在方法中无法使用普通的js语法赋值

data() {
 return {
  temp: {}
 };
 }

postTemp(resp){
    this.temp.id = resp.data.id; //使用普通js语法 无法赋值
    this.$set(this.temp,'id',resp.data.id); //使用vue提供的方法vue.set 可以赋值 
}

这种用法实际上是官方文档的 Vue.set(target, propertyName/index, value )

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

搭配Vue使用axios

使用文中的发送请求方法

• post & put 请求 直接使用大括号装payload
• get & del 请求直接拼接url 或 {params:{}}

从当前网页的路径获取参数

如当前网页路径如/find?userId=1,要获取等号后面的1

let id = location.search.split("=")[1];//获取值
if(id){this.findfun1(id); this.findfun2(id);}//执行函数

findfun1(id){
axios.get("/findid?id="+id).then(resp=>{
this.obj=resp.data;})

参考

https://cn.vuejs.org/v2/api/#Vue-set