h3

vue系列文章----vue基础语法及思想学习

上篇初步了解了vue，使用一些vue实例初步看到vue如何工作，本篇将从基础语法开始真正去了解vue

1，文本，最常见方式是使用{{ msg }} 双大括号的方式来进行渲染，只要绑定数据对象上的msg属性发生变化，插值出的内容都会发生更新

 　也可以使用v-once进行一次性插值，就算数据发生变化，插值处的内容不会发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE 一次性插值</title>
</head>
<body>
    <div id="app">
        <p v-once>{{ message }}</p>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        message: 'once'
    }
})
</script>
</html>
v-once一次性插值示例

2，在上个例子中，使用双扩号时候会将数据解释为纯文本，但如果有需求需要解释成html内容的话，那使用双括号无法满足，此时可以使用v-html进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html内容渲染</title>
</head>
<body>
    <div id="app">
        <p v-html="rawhtml"></p>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        rawhtml: "<b>aaasa</b>"
    }
})
</script>
</html>
v-html 输出html内容

3，对于所有的数据绑定，vue提供了完全的js支持，但是有个限制就是，每个绑定都只能包含单个表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 数据绑定使用js</title>
</head>
<body>
    <div id="app">
        {{ message.split('').reverse().join('') }}
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        message: 'hello world'
    }
})
</script>
</html>
vue 数据绑定使用js

4，指令，带有v-前缀的特殊属性

posted @ 2017-08-10 16:26  码上平天下  阅读(132)  评论(0)  编辑  收藏  举报