把对象的指定字段存放进声明的多个常量中

const{searchModel,person,orderType} = this;

persons.sort(function (p1,p2) {                // 升序                if (orderType===1){                    return p1.age-p2.age;                } else if (orderType===2){ // 降序                    return p2.age-p1.age;                }

<button @click="text1">text1</button><button @click="text2('haha')">text2</button><button @click="text3($event)">text3</button><button @click="text4">text4</button><!-- 如果没有指定参数进去,传递进去的就是event--><button @click="text5(123,$event)">text5</button> var vm = new Vue({el:'#test',methods:{    text1(){        alert("text 1");    },    text2(msg){        alert(msg);    },    text3(event){        alert(event.target.innerHTML);    },    text4(event){        alert(event.target.innerHTML);    },    text5(msg,event){        alert(msg+event.target.innerHTML);    },

可以看到@click使用vue中method的函数时,如果没有参数,可以简写,去掉(), 如果不写参数,传递进去的是事件本身event , text三中通过event拿到了标签的文本内容

@click.prevent阻止事件的默认行为#

<a href="http:; @click.prevent="text8">百度一下</a>  <!-- 阻止事件的默认行为 -->

<input type="text" @keyup.enter="text9"> <!--  @keyup.13(名字)  监听某一个键的点击事件 -->

使用vue将用户填入表单中的数据收集起来, 收集到哪里去? 其实是收集到 vue的data块中的属性中

其实就是在html使用v-model暴力绑定dom监听, 将单选框,输入框,多选框中用户输入进去的内容和data中的属性关联起来

input,textarea 等输入框,收集起来的值就是用户输入进去的值单选框 radio ,多选框 checkbox 等选择框,收集起来的值的 html中的value属性的值

<h1>表单中最终提交给后台的是 value值</h1><br><h2> 使用v-model实现表单数据的自动收集 </h2><form action="/XXX"  @submit.prevent="handleSubmit" ><!-- 阻止表单的默认自动提交事件 -->   <span>用户名:</span>   <input type="text" v-model="username"><br>   <span>密码</span>   <input type="password"  v-model="pwd" ><br>   <span>性别</span><br>   <input type="radio" id="female" value="女" v-model="sex">   <label for="female">女</label><br>   <input type="radio" id="male"  value="男" v-model="sex">   <label for="male">男</label><br><br>   <span>爱好</span><br>   <input type="checkbox" id="basket" value="basket" v-model="likes">   <label for="basket">篮球</label>   <input type="checkbox" id="foot" value="foot"  v-model="likes">   <label for="foot">足球</label>   <input type="checkbox" id="pingpang"  value="pingpang"   v-model="likes">   <label for="pingpang">乒乓球</label><br><br>   <span>城市</span><br>   <select v-model="cityId">       <option value="">未选择</option>       <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>   </select>   <span>介绍:</span>   <textarea name="" id="" cols="30" rows="10" v-model="dec"></textarea><input type="submit" value="注册"><br>    </form>    </div>    <script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({    el:'#test',    data:{        username:'',        pwd:'',        sex:'女',        likes:['foot'],        allCitys:[{id:1,name:'北京'},{id:2,name:"山东"},{id:3 ,name:"青岛"}],        cityId:'3' /* 默认让 3被选中*/,        dec:"哈哈"    },    methods:{        handleSubmit(){            alert(this.username+this.pwd);            alert(this.sex);        }    }})

vue对象在创建初始化的过程中一次执行如下声明周期相关的方法, 根据这个特性,通常把加载进入一个新的页面中时去发送ajax请求的方法放到mounted(){},收尾工作放在beforeDestroy(){}

var vm = new Vue({el: "#text",data: {},beforeCreate() {  // 创建之前回调    console.log("beforeCreate");},created() {  // 创建之后回调    console.log("created");},beforeMount() {    console.log("beforrMount");},// todo 常用, 异步操作, 比如发起ajax请求获取数据, 添加定时器mounted() { // 初始化显示之后会立即调用一次    console.log("mounted");    this.intervalId = setInterval(() => {        console.log("干掉vm之后, 定时器还在跑, 内存泄露了");        this.isShow = !this.isShow;    }, 1000);    /*      如果下面不使用箭头回调函数, this就是window, 而不是vm    * setInterval(() => {        this.isShow= !this.isShow;    },1000);    * */},// 更新阶段beforeUpdate() {  //更新阶段之前回调    console.log("beforeUpdate");},updated() {  // 更新阶段之后回调    console.log("updated");},// 死亡阶段// todo 常用 收尾工作beforeDestroy() {  // 死亡之前回调一次    console.log("beforeDestroy ");    clearInterval(this.intervalId);},destroyed() {    console.log("destroyed");},methods: {}}});

比如在设置定时器时, 定时器中需要对vue的属性进行操作,在定时器的代码块中this指的是定时器对象,es6的箭头语法解决就这个问题, 在箭头函数中this没有的属性,会到外层的vue中来找

this.intervalId = setInterval(() => {    console.log("干掉vm之后, 定时器还在跑, 内存泄露了");    this.isShow = !this.isShow;}, 1000);

按照vue的下面的几步要求, vue 会给目标元素添加或者移除特定的 css,实现动画的效果

需要添加动画的标签被 <transition name="" > XXX </transition>包裹

<div id="test">   <transition name="YYY">    <p v-show="isShow" class="">toggle</p>    <button @click="isShow=!isShow">toggle</button>    </transition></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">    new Vue({        el: '#test',        data() {            return {                isShow: true            }        }    });

一个简单的动画效果标签从隐藏->出现, 再从出现到隐藏的过程,就像下面这样

v-enter  v-enter-to   v-leave    v-leave-to  隐藏     出现         出现       隐藏

自定义这四个时期的状态

/* 显示的过度效果*/.YYY-enter-active {    transition: all 1s;}/* 隐藏的过度效果*/.YYY-leave-active {    transition: all 3s;}/* 从无到有的样式  */.YYY-enter {    opacity: 0;}/* 从有到无的样式  */.YYY-leave-to {    opacity: 0;    transform: translateX(20px);  /* 离开时,向X轴的正方向移动20px*/}

点击进入 moment.js网址 ,在这里可以找到需要引入的script标签

点击进入 moment.js的文档 在文档中可以找到对应的格式和例子

 <div id="test">    <h2>显示格式化的日期时间</h2>    <p>{{date}}</p>    <p>默认完整: {{date | dateFormat}}</p><!--  一旦我们这么写， 他就会把date的值，传递给dateFormat函数 -->    <p>年月日: {{date | dateFormat('YYYY-MM-DD')}}</p><!--  一旦我们这么写， 他就会把date的值，传递给dateFormat函数 -->    <p>时分秒: {{date | dateFormat('HH:mm:ss')}}</p><!--  一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --></div>/*  这个在官网上查找 */<script  type="text/javascript" src=";></script><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">        // 自定义过滤器    Vue.filter('dateFormat',(value,format)=>{ /*  Vue是函数对象 */      return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');    });    new Vue({        el:'#test',        data:{            date:new Date()        }    });

es6 的语法: 形参默认值 , 没传值的话,就使用默认值

 function(value,format="YYYY-MM-DD"){     return moment(value).format(format); }

常见的原生指令如下

v:text : 更新元素的textContent <br>v:html : 更新元素的innerHtml<br>v-if: true    如果为true,标签才会输出到页面 <br>v-else:    如果为false,标签才会输出到页面 <br>v-show:  通过控制display的样式来控制显示和隐藏<br>v-for:    遍历数组对象 <br>v-on:   绑定监听事件, 一般直接写  @ <br>v-bind:  强制绑定解析表达式  一般简写成 : <br>v-model:  双向数据绑定 <br>ref:  指定唯一的标识, Vue对象可以通过 $els 属性来访问这个元素对象  <br>v-cloak: 防止闪现可能应为网速的原因{{msg}} 一直解析不了, 于是用户就看到它了,不友好, 于是 vue推出 与css配合 [v-cloak] {display:none}  <br>

补充最后两个

ref 指定唯一的标识, Vue对象可以通过 $els 属性来访问这个元素对象防止闪现可能应为网速的原因{{msg}} 一直解析不了, 于是用户就看到它了,不友好, 于是 vue推出 与css配合 [v-cloak] {display:none}

例子:

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        [v-cloak] {   /*  回去寻找有这个属性名的标签  [v-cloak]   , 就是下面的p标签 */            display:none        }    </style></head><body><div id="test">    <p ref="content123">哈哈哈哈</p>    <button @click="hint">提示</button>    //  v-cloak="" + 上面的css 样式避免 {{ }} 闪现的效果    <p v-cloak="">{{msg}}</p>    <br></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">    // 注册全局指令    Vue.directive('')    new Vue({       el:'#test',       data:{        msg: '嘿嘿'       } ,        methods:{            hint(){              //  因为 `<p ref="content123">哈哈哈哈</p>` 使用了ref,所以vue可以通过this.$refs.content123 找到指定的这个元素                alert(this.$refs.content123.textContent)            }        }    });

本文转载于