vue的基本使用教程1（常用命令及实例操作）

最新推荐文章于 2025-05-21 01:28:50 发布

专职

最新推荐文章于 2025-05-21 01:28:50 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42289273/article/details/109130833

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue.js的基本用法，包括属性绑定、指令、条件与循环、按钮响应处理、表单绑定等内容，并展示了如何创建Vue实例及访问其内置元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue常用命令
Vue实例-创建-属性访问
Vue实例-冻结对象的属性
Vue实例-访问Vue对象的内置元素
Vue实例-生命周期-函数回调

1. vue的属性绑定

<body>
<div id="app">
    <p>
{#        django项目中直接使用vue对象属性，必须加上verbatim模板标签 #}
        {% verbatim %}{{ message }}{% endverbatim %}
    </p>
</div>
</body>
<script>
    var vm2 = new Vue({
        el: "#app",
        data: {
            message: "hello,vue!"
        }
    })
</script>
</html>

2. vue的指令

<body>
<span id="app2" v-bind:title="message">hello world</span>
</body>
<script>
  var vm = new Vue({
    el: "#app2",
    data: {
      message: "this is a tip"
    }
  })
</script>

3. vue中的条件与循环

（1）条件，p1标签seen=false,所以不显示，p2标签相反就显示

<body>
<p id="p1" v-if="seen">this ia a p element</p>
<p id="p2" v-if="seen">this ia s second p element</p>
</body>
<script>
  var vm1 = new Vue({
    el: "#p1",
    data: {
      seen: false,
    }
  });
  var vm2 = new Vue({
    el: "p2",
    data: {
      seen: true,
    }
  })
</script>

（2）循环

<div id="div1">
  <ol>
    <li v-for="name in names">{{ name }}</li>
  </ol>
</div>
</body>
<script>
  var vm = new Vue({
    el: "#div1",
    data:{
      names: [
        "tom1",
        "tom2",
        "tom3",
      ]
    }
  })
</script>

4. 按钮点击响应的处理

v-on:click绑定的是一个函数名

<body>
<div id="div1">
  <p>{{message}}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
</body>
<script>
  var vm = new Vue({
    el: "#div1",
    data:{
      message: "how are you"
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split("").reverse().join("")
      }
    }
  })
</script>

5. 表单绑定

v-model绑定的是表单中的值

<body>
<div id="div1">
  <p>{{message}}</p>
  <input type="text" v-model="message">
</div>
</body>
<script>
  var vm = new Vue({
    el: "#div1",
    data:{
      message: "how are you?"
    }
  })
</script>

6. Vue实例-创建-属性访问

<script>
  // 创建json对象
  var mydata = {
    a: 88
  };
  // 创建vue实例
  var vm = new Vue({
    el: "#div1",
    data: mydata
  });

  console.log(mydata.a);
  console.log(vm.a);
  // ===等号判断值和数据类型都相等
  // ==等号只判断值相等，类型可以不相等
  console.log(mydata.a === vm.a);  // 输出true
  mydata.a = 2;
  console.log(vm.a);  // 输出2
  vm.a = 3;
  console.log(mydata.a);  // 输出3
</script>

7. Vue实例-冻结对象的属性

<body>
<div id="div1">
  {{message}}
</div>
</body>
<script>
  // 创建json对象
  var mydata = {
    message: "hello world"
  };
  // 冻结对象属性，对象的属性就无法修改了
  Object.freeze(mydata);
  // 创建vue实例
  var vm = new Vue({
    el: "#div1",
    data: mydata
  });
</script>

8. Vue实例-访问Vue对象的内置元素

<div id="div1">
  {{message}}
</div>
</body>
<script>
  // 创建json对象
  var mydata = {
    message: "hello world"
  };
  // 创建vue实例
  var vm = new Vue({
    el: "#div1",
    data: mydata
  });
  // 访问vue对象的内置元素属性
  console.log(vm.$data.message);  // 输出hello world
  // 通过内置元素赋值属性
  vm.$data.message = "foo bar";
  console.log(vm.$data.message);
  // 创建新json对象
  var mydata2 = {
    message: "how are you"
  };
  // 不能对内置元素$data进行赋值, 推荐对内置元素属性赋值
  vm.$data = mydata2;
  console.log(vm.$data.message);  // 输出foo bar,而不是how are you
</script>

9. Vue实例-生命周期-回调函数

<body>
  <div id="div1">
    {{message}}
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#div1",
    data: {
      message: "hello world"
    },
    // 生命周期回调函数:为元素挂载之后被调用
    mounted: function(){
      console.log("mounted")
    },
    // 生命周期回调函数:为元素挂载之前被调用
    beforeMount: function () {
      console.log("beforMount")
    },
    // 生命周期回调函数:创建完成
    created: function () {
      console.log("Vue对象创建完成被调用")
    },
    // 生命周期回调函数:创建之前
    beforeCreate: function(){
      console.log("Vue对象创建之前被调用")
    },
  })
</script>