Vue | 语法学习起步

Hello Vue

1、引入 Vue.js

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、编写如下代码

<div id="app">
    {{message}}
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

这样你就能看到如下字样

Hello Vue!

语法

取值

Vue.js为我们提供了三种取值方式： {{}} 、 v-text 和 v-html 。如下示例：

<div id="app">
    <div>{{message}}</div>
    <div v-text="message"></div>
    <div v-html="message"></div>
    <div v-text="htmlValue"></div>
    <div v-html="htmlValue"></div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            htmlValue: '<h3>我是h3标签</h3>'
        }
    })
</script>

效果

Vue 取值

点击事件

用 v-on:click 表示点击事件，另外我们也可以简写成 @click。我们来看例子：

<div id="app">
    <button v-on:click="onClickAlert">
        点击弹窗提示
    </button>
    <button @click="onClickChangeText">
        {{exampleChangeText}}
    </button>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            exampleChangeText: '点击更换文字'
        },
        methods: {
            onClickAlert: function() {
                alert('Hello 你好！From Alert')
            },
            onClickChangeText: function() {
                this.exampleChangeText = '文字已更换，你还好吗？'
            }
        }
    })
</script>

效果：

Vue 点击 Vue 点击 2 Vue 点击 3

双向绑定

Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
    <input v-model="text">
    <div>{{text}}</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            text: ''
        }
    })
</script>

效果

Vue 双向绑定

属性

v-bind 指令可以绑定属性，简写为 :

<div id="app">
    <input v-bind:title="tip">
    <input v-bind:title="'js' + tip">
    <input :title="tip">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            tip: '请在此输入你要查询的内容'
        }
    })
</script>

效果：

Vue 属性 1 Vue 属性 2

这里要说明的是，v-bind中是可以直接写 js 代码的。

监听

<div id="app">
    姓：<input v-model="firstName"> 名：<input v-model="lastName">
    <div>姓名：{{fullName}}</div>
    <div>长度：{{count}}</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
            count: 0
        },
        computed: {
            fullName: function() {
                return this.firstName + ' ' + 
                       this.lastName
            }
        },
        watch: {
            fullName: function() {
                this.count = this.fullName.length - 1
            }
        }
    })
</script>

效果：

Vue 监听

if

你可以用 v-if 、 v-else 和 'v-else-if'

<div id="app">
    <h1 v-if="ok">Yes</h1>
    
    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

    <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 type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            ok: true,
            type: 'D'
        }
    })
</script>

效果：

Vue if

for

列表，可以通过 v-for 来进行循环

<div id="app">
    <ul>
        <li v-for="(item, index) in array" :key="index">
            {{item}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            array: ['张三', '李四', '王五']
        }
    })
</script>

Vue for

组件

定义一个 Vue 组件

Vue.component('button-counter', {
    data: function() {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{count}}</button>'
})

使用这个组件

<div id="components-demo">
    <button-counter></button-counter>
</div>

var app = new Vue({
    el: '#components-demo'
})

效果

Vue 组件