vue学习

模板语法

  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>

  6. 用户输入，在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

    v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

  7. 过滤器

    Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下；

    <div v-bind:id="rawId | formatId"></div>

    ```html

    <!DOCTYPE html>

    Vue 测试实例

    </head>

    {{ message | capitalize }}

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) } } }) </body> </html>

8. 缩写
`v-bind` 缩写，
```code
<!-- 完整语法 -->
<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

    ```code

    现在你看到我了

    菜鸟教程

    学的不仅是技术，更是梦想！

    哈哈哈，打字辛苦啊！！！

new Vue({ el: '#app', data: { seen: false, ok: false } })

2. `v-else`
```code
<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

    ```code

    A B C Not A/B/C

new Vue({ el: '#app', data: { type: 'C' } })

4. `v-show`
```code
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

循环语句

  1. v-for

    ```code

    1. {{ site.name }}

new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } })

2. `v-for` 迭代对象
```code
<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 迭代整数

    ```code

    • {{ n }}

new Vue({ el: '#app' })

### 计算属性
```code
<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);
    });
    }
},