vue_02基础

最新推荐文章于 2022-11-01 21:16:18 发布

weixin_45807545

最新推荐文章于 2022-11-01 21:16:18 发布

阅读量66

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45807545/article/details/105225935

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

双向绑定
绑定class和style：
计算属性
自定义指令
过滤器
Axios
组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    .hide{display: none;}
    .fail{background-color:red;color:white;}
    .success{background-color: green;color: white;}
    .vali{font-size: 10px;font-weight: 800;padding: 2xp;}
  </style>
</head>
<body>
  <div id="app">
    <input type="text" :placeholder="ph" v-model="phone">
    <span class="vali" :class="phoneClass">{{phoneMsg}}</span>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        phone:"",
        ph:"请输入手机号码",
        phoneClass:{
          hide:true,
          fail:false,
          success:false
        },
        phoneMsg:"消息提醒"
      },
      watch:{
        phone(){
          if(/^1[3-8]\d{9}$/.test(this.phone)){
            this.phoneClass={
              hide:false,fail:false,success:true
            },
            this.phoneMsg="手机号码输入正确"
          }else{
            this.phoneClass={
              hide:false,fail:true,success:false
            },
            this.phoneMsg="手机号码格式不正确"
          }
        }
      }
    })
  </script>
</body>
</html>

双向绑定:
哪个属性会被改变，v-model就自动绑定哪个属性
文本框和文本域:
<input type=“text” v-model[:value]=“变量”>
<textarea v-model[:value]=“变量”>
单选按钮:
男
女
v-model 先用sex的值和value做比较
哪个value==sex，当前radio就选中，否则就不选中
复选框:
单独使用:
同意
v-mode:checked 且isAgree是bool类型
select元素:
value=30

未付款已付款已发货已签收

watch 监控: 当某个模型变量被修改时，自动触发的函数
wath:{
受监控的变量名(){
//会在受监控的变量被双向绑定修改时自动执行
}
}

绑定class和style
绑定style:
1. 其实style也是一个普通的字符串属性，也可以:
  <ANY :style=“模型变量”
  模型变量: “css属性:值; css属性:值; …”
  问题: 字符串拼接很繁琐，不直观
2. 将style看做一个对象绑定:
  <ANY :style=“对象名”
  data:{
  对象:{
  css属性:值,
  css属性:值
  }
  }//css属性都要去横线变驼峰！

绑定class

其实class属性也只是一个字符串属性，也可以:
<ANY :class=“拼接字符串”
都用对象方式绑定:
<ANY :class=“对象名”
//“success”
data:{
对象名:{
hide: false,
success: true,
fail:false
}
}
计算属性：
什么是: 自己不保存值，每次访问都要根据其他属性计算出来
何时: 要显示的值，需要根据其他属性动态计算才能获得时
如何:
定义计算属性:
computed:{
计算属性名(){
根据其他属性，返回计算结果
return … …
}
}
绑定时: 和普通属性完全一样，不要加()
vs methods:
methods: 调用时，必须加()，调用几次，就重复计算几次
computed: 绑定时，不加()，即使多次绑定，也只计算一次。vue会缓存计算属性的计算结果
总结: 如果更关心值/结果，优先选计算属性
如果更关心操作/执行过程，优先选方法
自定义指令:
如果13种指令不够用，可自定义指令:
如何:
定义指令:
Vue.directive(
“指令名”,//不写v-前缀
{
inserted(elem){//当拥有该指令的元素被添加到DOM树后自动执行
//elem: 接住当前标有该指令的DOM元素对象
对elem执行各种想要的DOM操作
}
}
)
使用指令:
<ANY v-指令名>
当该元素被加载到DOM树上后，自动执行指令中的inserted
过滤器:
什么是: 对从模型中绑定来的原始值，进行再加工后，再显示
何时: 如果模型中的原始值不能直接使用
如何:
定义过滤器:
Vue.filter(“过滤器名”, function(value,形参1,…){
//value会接住要处理的原始值
return 改造后的新值
})
使用过滤器:
在绑定时:
{{原始模型变量|过滤器(实参1,…)|下一个过滤器 }}
:属性=“原始模型变量|过滤器(实参1,…)|下一个过滤器”
axios:
什么是: 基于Promise的专门发送http请求的函数库
何时: 今后在vue中发送ajax请求首选axios
为什么:
1. 手写ajax四步/封装自定义函数
2. jQuery: $.ajax() —— Vue中没有jQuery
3. Vue官方曾经提供了专门发送ajax请求的组件：vue-resource
  ——官方不推荐使用
4. Vue官方推荐axios作为Vue中标准的发送ajax请求的组件
  如何:
下载并引入:axios.min.js
内存中，就多出一个axios对象，有两个方法: get() post()
发送get请求:
axios.get(“url”,{
params:{
uname: “dingding”,
upwd:“123456”
}
}).then(function(res){
//res是经过axios再封装的响应对象，不仅是result
//result： res.data才是从前的result
})
发送post请求:
axios.post(“url”,“uname=dingding&upwd=123456”)
组件:
什么是: 拥有专属的HTML，CSS，js和数据的独立页面区域
为什么: 重用！
何时: 只要一个页面功能，需要反复使用时
如何:
定义组件:
Vue.component(
“组件名”，//不要用驼峰命名，而用"单词-单词"
{
template:"#tplID", //找到要反复使用的HTML片段
data:function(){//每次重复创建组件时，都自动调用data函数，为本次组件创建一个专属的模型对象
return { 模型数据 }//类似于以前的data
},
methods:{ 方法/事件处理函数 },
computed:{ 计算属性 },
watch:{ 监听函数 }
}
)
HTML片段都要保存在元素中并其一个唯一的id
使用组件:
其实vue中的一个组件，就是一个可重复使用的自定义标签而已。组件名其实就是一个标签名:
<组件名></组件名>
会被template的HTML片段代替！

<!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">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <script>
    Vue.component("my-counter",{
      template:"#tplCounter",
      // data:function(){
      data(){  
        return{
          n:1
        }
      },
      methods:{
        change(i){this.n+=i;}
      }
    })
  </script>
</head>
<body>
<div id="app">
  <my-counter></my-counter>
  <my-counter></my-counter>
  <my-counter></my-counter>
</div>
<template id="tplCounter">
<!-- <div id="tplCounter" style="display: none;"> -->
  <div>
    <button @click="change(-1)">-</button>
    <span>{{n}}</span>
    <button @click="change(+1)">+</button>
  </div>
<!-- </div> -->
</template>  

<script>
var vm=new Vue({
  el:"#app",
  data:{
    
  }
})
</script>
</body>
</html>

weixin_45807545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue_02基础

双向绑定绑定class和style：计算属性自定义指令过滤器Axios组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫