vue基础

最新推荐文章于 2024-09-13 14:34:15 发布

奔跑的猴子_

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量36

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_48701727/article/details/130329119

版权

1.创建Vue对象


      // 创建Vue对象
      new Vue({
        el: "#app", //element:元素，dom元素的id
        // 以数据为导向，无需关注dom
        data: {
          // 自定义的数据
          msg: "hello vue!",
          time: new Date().toLocaleTimeString(),
          table: `<table><tr><td>替代了innerHTML</td></tr></table>`,
          isShow: true,
        },
        methods:{
            f1(){},
            f2(){},
        },
      });

2.插值语法

语法: {{xxx}}

作用: 用来指定标签体内容

<h2>插值语法:{{msg}}</h2>
<h2>插值语法:{{time}}</h2>

3.v-text、v-html

v-text

语法: v-text=“xxx”
作用: 向其所在的节点中渲染文本内容

v-html

语法: v-html=“xxx”
作用: 向指定节点中渲染包含html结构的内容

      <h3 v-text="msg"></h3>
      <div v-html="table"></div>

4.v-if、v-show

v-if

语法: v-if=“表达式” v-else-if=“表达式” v-else=“表达式”
作用: 用Vue实现隐藏
注意: v-if可以和v-else-if、v-else一起使用

v-show

语法: v-show=“表达式”
作用: 用Vue实现隐藏

      <div v-html="table" v-show="isShow"></div>
      <div v-if="isShow">我隐身了</div>
      <div v-if="Math.random()>0.5">Now you see me</div>
      <div v-else>Now you don't</div>

5.v-for

语法：
- 遍历数组： v-for=“(item,index) in xxx”
- 遍历对象： v-for=“(value,key) in xxx”
作用: 用于展示列表数据，可遍历数组、对象、字符串、指定次数

<body>
    <div id="app">
      <table>
        <tr>
          <td>id</td>
          <td>name</td>
          <td>age</td>
        </tr>
        <!-- 遍历数组 第一个参数数组里的值 【第二个参数下标】 -->
        <tr v-for="(s,i) in student">
          <td>{{s.id}}</td>
          <td>{{s.name}}</td>
          <td>{{s.age}}---索引{{i}}</td>
        </tr>
      </table>
      <!-- 遍历对象 第一个参数属性值 第二个参数 属性名 -->
      <div v-for="(value,key) in car">{{key}}:{{value}}</div>
      <div v-for="i in 10">{{i}}</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          student: [
            { id: 100, name: "张三", age: 19 },
            { id: 101, name: "李四", age: 19 },
            { id: 102, name: "王五", age: 19 },
          ],
          car: { name: "特斯拉", type: "Model Y", price: 300000 },
        },
      });
    </script>
  </body>

6.v-on

语法: v-on:xxx 或 @xxx 其中xxx是事件名
作用: 事件的基本使用

  <body>
    <div id="app">
      <div>计数器<button v-on:click="f1()">{{count}}</button></div>
      <div>计数器<button v-on:click="count++">{{count}}</button></div>
      <div>计数器<button @click="count++">{{count}}</button></div>
      <div>计数器<button @click="f1()">{{count}}</button></div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          count: 0,
        },
        // 方法
        methods: {
            // f1:function(){}
          f1() {
            this.count++;
          },
        },
      });
    </script>
  </body>

7.v-model

语法: v-mode:value=“xxx” 或简写为 v-model=“xxx”
作用: 数据不仅能从 data 流向页面，还能从页面流向 data

<body>
    <div id="app">
      <input type="text" v-model="info" />
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          info: "天行健",
        },
      });
    </script>
  </body>