Vue模块语法

Vue模块语法

---

一、插值

(1) { { }} 文本插值

{ { }}用于输出对象属性和函数返回值。{ { }}中的内容可以变量、值或表达式，Vue会对{ { }}中的内容进行计算，将计算的结果以文本的形式插入到网页中

实例：文本插值

<div id = "app" style="margin-left: 300px;">
    <h2>
        文本插值
    </h2>

    <p>变量：{
  {num}}</p>
    <p>表达式：{
  { 5 + 10 }}</p>
    <p>三目运算符：{
  { true? 15 : 10}}</p>
    <p>函数：{
  { getNum() }}</p>
    <p>匿名函数：{
  { (() => 5 + 10)() }}</p>
    <p>对象：{
  { {num : 15} }}</p>
    <p>函数对象：{
  { getNum }}</p>
    <p>html代码(表达式)：{
  { '<span> 15 </span>' }}</p>
    <p>html代码(变量)：{
  { html }}</p> 
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            num : 15,
            html:'<span> 15 </span>'
        },
        methods: {
            getNum : function(){
                return this.num
            }
        }
    })
</script>

(2) v-html 输出 html 代码

v-html用于在网页中插入html语句。在html中使用<div v-html=" "></div>语句，Vue会对" "(引号)中的内容进行计算，将计算的结果以html的形式插入到网页中

实例：插入单行html

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

<script>
    new Vue({
    
        el: '#app',
        data: {
    
            message: '<h1>Hello World!</h1>'
        }
    })
</script>

当要插入多行html语句时，可以使用**`多行内容`**来实现

实例：插入多行html

<div id="app">
    <div v-html="message"></div>
</div>
        
<script>
    new Vue({
    
        el: '#app',
        data: {
    
            message: `
                    <h1>标题h1</h1>
                    <h2>标题h2</h2>
                    <h3>标题h3</h3>
                    <h4>标题h4</h4>
                    `
        }
    })
</script>

(3) v-bind 绑定属性

v-bind用于单向绑定html标签的属性。在html标签中使用v-bind:属性名=" "语句，Vue会对" "(引号)中的内容进行计算，将计算的结果作为该属性的属性值

实例：v-bind 绑定属性

<div id="app">
    <p>{
  { message }}</p>
    <input v-bind:value="message">
</div>

<script>
    new Vue({
    
        el: '#app',
        data: {
    
            message: 'Hello!'
        }
    })
</script>

运行实例可见：输入框的内容修改时，第一个文本的内容不会修改。这是因为message属性的值并没有被改变。因此v-bind 绑定是单向的

二、用户输入

(1) v-model 双向数据绑定

(1.1) v-model 基础

上面讲了使用v-bind 进行单向绑定。下面来讲一讲，使用v-model 进行双向数据绑定

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

实例：v-model 双向数据绑定