Vue前端框架 - 爱码网

Vue初体验

直接下载引入：https://cn.vuejs.org/v2/guide/installation.html

写法

<body>
    <div id="div">
        {{user_name}}
    </div>
</body>

// 两种引入方式，任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./vue.js"></script>


<script>
    var app = new Vue({
        el:\'#div\',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:\'我是一个div\' 
        }
    })
</script>

Vue实例对象

每个Vue应用都是通过Vue函数创建的一个新的Vue实例开始的：

var vm = new Vue({
  // 选项
})

<body>
    <div id="div">
        {{user_name}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el:\'#div\',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:\'我是一个div\' 
        }
    })
    
    // 打印Vue实例对象
    console.log(app);
</script>

模板语法-指令（重要）

1、插值

数据绑定最常见的形式就是使用“Mustache”语法（双打括号）的文本插值

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示

<body>
    <div id="div">
       文本插值 {{html_str}}
    </div>
</body>
<script>
    var app = new Vue({
        el:\'#div\',
        data:{
            html_str:\'<h2>Vue<h2>\'
        }
    })
</script>

页面效果

2、v-text / v-html文本

<body>
    <div id="div">
        <p v-text="seen"></p>
        <p v-html="str_html"></p>
    </div>
</body>
<script>
    var app = new Vue({
        el:\'#div\',
        data:{
            seen:\'<h1>Vue</h1>\',
            str_html:\'<h1>Vue</h1>\'
        }
    })
</script>

页面效果

注意：

　　v-text和插值表达式的区别

　　　　v-text标签的指令替换整个标签包括标签自身

　　　　插值表达式，可以替换标签中局部的内容

　　v-html

　　　　可以渲染内容中的HTML标签

　　　　尽量避免使用，否则会带来危险（XSS攻击，跨站脚本攻击）

3、v-bind 属性绑定

绑定a标签上的id

<a id="app" v-bind:href="\'del.php?id=\' + id">删除</a>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            id: 11
        }
    });
</script>

绑定class

　　对象语法和数组语法

　　　　对象语法：

<div id="app" v-bind:class="{active: isActive}">
    hei
</div>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            isActive: true
        }
    });
</script>

　　　　数组语法

<div id="app" v-bind:class="[activeClass, dangerClass]">
    hei
</div>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            activeClass: \'active\',
            dangerClass: \'text-danger\'
        }
    });
</script>

绑定style

　　对象语法和数组语法

　　　　对象语法

<div id="app" v-bind:style="{color: redColor, fontSize: font + \'px\'}">
    hei
</div>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            redColor: \'red\',
            font: 40
        }
    });
</script>

　　　　数组语法

  <div id="app" v-bind:style="[color, fontSize]">abc</div>
  <script>
      var vm = new Vue({
          el: \'#app\',
          data: {
              color: {
                  color: \'red\'
              },
              fontSize: {
                  \'font-size\': \'18px\'
              }
          }
      });
  </script>

v-bind简化语法

<div id="app">
    <img v-bind:src="imageSrc">
    <!-- 缩写 --> 
    <img :src="imageSrc">
</div>

<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            imageSrc: \'1.jpg\',
        }
    });
</script>

4、数据绑定

v-bind单向数据绑定

<div id="div">
    <input type="text" :value="input_val">
</div>

<script>
    var app = new Vue({
        el: \'#div\',
        data: {
            input_val: \'hello world \'
        }
    })
</script>

页面效果

5、双向数据绑定 v-model

<div id="div">
    <input type="text" v-model="input_val" >
</div>

<script>
    var app = new Vue({
        el: \'#div\',
        data: {
            input_val: \'hello world \'
        }
    })
</script>

页面效果

双向绑定只能使用在客户端可以操作的标签上像文本框、文本域、复选框这种

绑定复选框

<div id="div">
    吃饭：<input type="checkbox" value="eat" v-model="checklist"><br>
    睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br>
    打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br>
    {{ checklist }}
</div>

<script>
    var vm = new Vue({
       el: \'#div\',
        data: {
            checklist: \'\'
            // checklist: []
        }
    });
</script>

绑定单选框

<div id="app">
    男<input type="radio" name="sex" value="男" v-model="sex">
    女<input type="radio" name="sex" value="女" v-model="sex"> 
    <br>
    {{sex}}
</div>

<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            sex: \'\'
        }
    });
</script>