Vue学习

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue模板语法

1.文本

<!-- ================= 插值文本 ======================= -->
        <div id="vue_det">
            <!-- {{}} 用于输出对象属性和函数返回值。 -->
            <h1>site : {{name}}</h1>
            <h1>url : {{url}}</h1>
            <h1>{{details()}}</h1>
            <div v-html="message">

            </div>
        </div>
<script type="text/javascript">
<!-- ================= 插值文本(v-html) ======================= -->
            var vm = new Vue({
                // el代表需要构造的元素id
                el: '#vue_det',
                // data用于自定义属性
                data: {
                    name: "天天加油",
                    url: "www.goodly.com",
                    alexa: "13540869383",
                    message: '<h1>菜鸟教程</h1>'
                },
                // methods 用于定义的函数,可以通过 return 来返回函数值。
                methods: {
                    details: function() {
                        return this.name + " - 学的不仅是技术，更是梦想！";
                    }
                }
            });
</script>

2.html(v-html)

<div id="app">
    <div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

3.属性（v-bind:）

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!-- ================= 插值属性 ======================= -->
    <style>
        .class1{
  background: #444;
  color: #eee;
}
</style>
        <div id="app">
            <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
            <br><br>
            <div v-bind:class="{'class1': use}">
                <!-- 为use=false则不赋class值为class1，反之亦然-->
                v-bind:class 指令
            </div>
        </div>
<script>
<!-- ================= 插值属性(v-bind) ======================= -->
            var test1 = new Vue({
                el: '#app',
                data: {
                    use: false
                }
            });
</script>

4.表达式

<!-- ================= 表达式 ========================= -->
        <div id="app1">
            {{5+5}}<br>
            {{ ok ? 'YES' : 'NO' }}<br>
            {{ message.split('').reverse().join('') }}
            <div v-bind:id="'list-' + id">菜鸟教程</div>
        </div>
<script>

<!-- ================= 表达式 ========================= -->
            new Vue({
                el: '#app1',
                data: {
                    ok: true,
                    message: 'RUNOOB',
                    id: 11
                }
            })
</script>

5.点击事件（v-on：click）

<!-- ================= 点击事件 ========================= -->
        <div id="bu1">
            <button type="button" v-on:click="test1()"></button>
        </div>
<script>
<!-- ================= 点击事件 ========================= -->
            new Vue({
                el: '#bu1',
                data: {
                    ok: true,
                },
                methods: {
                    test1: function() {
                        console.log(11111)
                    }
                }
            })
</script>

6.指令判断（v-if）

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<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: true,
    ok: true
  }
})
</script>

7.参数

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

8.数据双向绑定

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


<!--=====================================数据双向绑定================================= -->
        <div id="app">
            <p>{{message}}</p>
            <input type="text" v-model="message"/>
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    message:''
                }
            })
        </script>

9.反转字符串

<div id="app">
            <p>{{message}}</p>
            <button v-on:click="revers" style="width: 50px;height:30px;">反转</button>
        </div>
        
        
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    message:'qwertyu'
                },
                methods:{
                    revers:function(){
                        this.message = this.message.split('').reverse().join('')
                        
                    }
                }
            })