vue学习

[TOC]

模板语法

  1. v-html用于输出html代码;
  2. v-bind用于设置html属性中的值;
  3. 指令 指令是带有v-前缀的特殊属性,指令用于在表达式的值改变时,将某些行为应用到 DOM 上;
  4. 参数,参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性;
  5. 修饰符,修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用;
<form v-on:submit.prevent="onSubmit"></form>
  1. 用户输入,在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定 v-model 指令用来在 inputselecttextareacheckboxradio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
  2. 过滤器 Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下;
<div v-bind:id="rawId | formatId"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>
  1. 缩写 v-bind 缩写,
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

条件语句

  1. v-if
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术,更是梦想!</p>
      <p>哈哈哈,打字辛苦啊!!!</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: false,
    ok: false
  }
})
</script>
  1. v-else
<div id="app">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
	
<script>
new Vue({
  el: '#app'
})
</script>
  1. v-else-if
<div id="app">
    <div v-if="type === 'A'">
      A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>
  1. v-show
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

循环语句

  1. v-for
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
  1. v-for 迭代对象
<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术,更是梦想!'
    }
  }
})
</script>
  1. v-for 迭代整数
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

计算属性

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

监听属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs学习</title>
    <script src="./lib/vue.js"></script>
</head>
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>
    <div id="app">
        <p style = "font-size:25px;">计数器: {{ counter }}</p>
        <button @click = "counter++" style = "font-size:25px;">点我</button>


    </div>

    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'<h3>vue测试</h3>',
            use: false,
            counter:1
        }
    });
    vm.$watch('counter',function (nval, oval) {
        alert('计数器数值变化:'+oval+'变为'+nval+'!');
    })

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs学习</title>
    <script src="./lib/vue.js"></script>
</head>
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>
    <div id = "computed_props">
        千米 : <input type = "text" v-model = "kilometers">
        米 : <input type = "text" v-model = "meters">
    </div>
    <p id="info"></p>

    <script>
    var vm = new Vue({
        el:'#computed_props',
        data:{
            kilometers:0,
            meters:0
        },
        watch:{
            kilometers: function (val) {
                this.kilometers = val;
                this.meters = this.kilometers*1000;
            },
            meters:function (val) {
                this.kilometers = val/1000;
                this.meters = val;
            }
        }
    });
    vm.$watch('kilometers',function (newValue, oldValue) {
        document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
    })

</script>
</body>
</html>

样式绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>
</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label>
                    搜索:
                    <input type="text" class="form-control" v-model="keywords">
                </label>

            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <td>Id</td>
                    <td>Name</td>
                    <td>Ctime</td>
                    <td>Operation</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td>
                        <a href="" @click.prevent="del(item)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</body>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1,name:'奔驰',time:new Date()},
                {id:2,name:'宝马',time:new Date()}
            ]
        },
        methods:{
            add(){
                var car = {id:this.id,name:this.name,time:new Date()}
                this.list.push(car)
                this.id= this.name = ""
            },
            del(item){
                this.list.pop(item)
            },
            search(keywords){
                var newList = [];
                this.list.forEach(item =>{
                    if ((item.name.indexOf(keywords)) != -1)  newList.push(item)
                })
                return newList;
            }
        }
    })


</script>
</html>

Vue过滤器

使用场景:v-bind表达式,mustache插值

Vue.filter('dateFormat',function (dateStr) {
        var dt = new Date(dateStr);
        var y = dt.getFullYear();
        var m = dt.getMonth()+1;
        var d = dt.getDate();
        return `${y}-${m}-${d}`
    })
<td>{{item.time | dateFormat }}</td>

键盘事件

<input type="text" class="form-control" v-model="name" @keyup.enter="add">

自定义指令

Vue.directive('focus',{
        bind:function (el) {
            el.focus()
        },
        inserted:function (el) {
            el.focus()
        },
        update:function (el) {

        }
    })
Vue.directive('color',{
        bind:function (el,binding) {
            el.style.color = binding.value
        }
    })
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">

Vue实例的生命周期

Vue ajax

getInfo:function(){
	var url = '/wymusic?id=19723756';
	this.$http.get(url).then(response=>{
		this.list = response.data.result.tracks;
		},error=>{
		console.log('请求失败');
		console.log(error);
	});
	}
},