Vuejs复习笔记

vue.js 的复习

目录

1. 模板语法
2. 其他(过滤器、组件)
3. 指令(v-show和v-if、v-bind class绑定和style绑定、双向数据绑定)
4. 特性(计算属性、侦听属性、实例生命周期)
5. 数据交互

一、模板语法

message
 
{{num+1}}
  
 

new Vue({
    el:"#ID或.class名",
    data:{变量:'模板语法的填充内容'}. //字典形式
    method:{方法或函数},
})

二、指令

• v-bind （简写:）设置元素的class属性
• v-on (简写@)注册事件
• v-if、v-else、v-else-if 条件语句
• v-show 元素样式的显示和隐藏
• v-for 遍历数组或对象

1.v-show和v-if

    
显示
    
A
B
C
    
v-show=true显示,false隐藏
     
     
     

2.v-for

  
{{item}}
 //获取数组的值
  
{{index}}:{{value}}
 //获取数组的索引和值
  
{{value}}:{{dict}}
 //获取对象的值
  
{{key}}:{{value}}
 //获取对象的键和值

3.v-bind class绑定

<标签名 v-bind:class="填充属性、对象、数组">

  
 //填充属性
  
 //填充对象
  
 //填充数组    

4.v-bind style绑定

<标签名 v-bind:style="属性设置"> 或 <标签名 v-bind:style="{属性设置}">

new Vue({el:"#ID",data:{}})

new Vue({el:"#ID",data:{set:'red'}})

new Vue({el:"#ID",data:{sty:{'color':'red', ...}}})

5.双向数据绑定

                          //单行文本框
           //复选框
          //单选框
A..... //下拉框

6.事件处理

@click.stop="事件名" // 阻止冒泡
@submit.prevent="事件名"
methods:{事件名:function(){函数体}

7.自定义指令

Vue为了完成项目需求，核心是操作DOM或是数据
1 全局自定义指令
Vue.directives('指令名',{inserted:function(ele){...}})

• 指令名不用加v-，调用时要加v-
• ele指当前标签对象

2 局部自定义指令

new Vue({
    ...
 directives:{}
})

三、其他

1.过滤器

将某些数据做对应处理(如文本格式化)

• 公有过滤器：所有vue对象都可使用(私有过滤器在Vue实例创建之前)

Vue.filter("过滤器名",function(val){函数体})

• 私有过滤器：在某个Vue对象中定义，在当前控制范围内使用

{{money | RMB | YUAN}}

2.vue组件(Component)

组件可扩展 HTML 元素，封装可重用的代码

Vue.component('simple-counter', {           // 注册一个组件：
  props:['pos'],                            //props 显式地声明它预期的数据,用于传参数
  template: '{{ counter }}',
  data: function () {                         //data 必须是函数
    return {counter: 0}                      //data属性通过函数返回值 方便其他地方调用 。
  }
})

           //使用组件

四、特性

1.计算属性

页面插值表达式里的复杂逻辑，用在Vue实例中用计算属性写：

{{ message.split('').reverse().join('') }}

标签中的复杂计算转换为 创建Vue实例时属性computed

new Vue({
    ...
    computed:{reversedMessage:function(){
        return this.message.split('').reverse().join('')}}
    )}

2.侦听属性

监听data对象中数据的变化

new Vue({...watch:{变量:function(newval,oldval){调用newval和oldval}})

3.实例生命周期

Vue实例在被创建时都要经过如设置数据监听、编译模板、将实例挂载到DOM，在数据变化时更新 DOM 等初始化过程
beforeCreate >created >beforeMount >mounted >beforeUpdate >updated

• beforeCreate 做数据的初始化之后被 调用。
• created 实例创建完成后被 调用
• beforeMount 对即将进行渲染的数据做特殊的判断或处理 调用 (挂载到DOM)
• mounted 页面有数据渲染时 调用
• beforeUpdate 数据更新时 调用
• updated 更新完成，将数据发回服务器时 调用

五、数据交互

//完整形式------------------------------>
var vm = new Vue({
  el:"#",
  data:{},
  mounted:function(){
    axios({url:'文件路径', method:'get | post'});
    .then(function (response) {函数体});  //请求成功响应
    .catch(function (error) {函数体});   //请求失败响应
  }
})

//简写形式------------------------------>
var vm = new Vue({
  el:"#",
  data:{},
  mounted:function(){
    axios.get('文件路径?id=1',{responseType: 'json'}); //get方式,返回json格式
    //axios.post('文件路径', {id:1,...},{responseType: 'json'}); //post方式,返回json格式
    .then(function (response) {函数体});  //请求成功响应
        //匿名函数写法为： .then(response => {函数体});
    .catch(function (error) {函数体});   //请求失败响应
        //匿名函数写法为： .catch(error => {函数体});
  }
})