vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

Zoya_R

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量187

点赞数

分类专栏： JAVA入门前端

本文链接：https://blog.csdn.net/Zoya_R/article/details/103887066

版权

这篇博客详细介绍了Vue的基础知识，包括生命周期、指令、页面标签、实例属性、自定义组件和异常处理。重点讲解了Vue的初始化过程，如beforeCreated、created、beforeMount、mounted等阶段，以及如何使用v-bind、v-model、v-if/v-show、v-for等指令。还提到了事件修饰符、组件通信和Vue路由的基本概念。

摘要由CSDN通过智能技术生成

基础演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue-2.4.0.js"></script>
</head>
<body>

<div id="d1">
    <!--    {
   {
   }}单向绑定：该元素的值改变，属性值不改变；只是从属性中获得一个值-->
    {
   {
   location.city}}{
   {
   location.area}}
    {
   {
   month}}月
    {
   {
   day}}日天气{
   {
   weather}}
    <hr>
    <!--    v-bind单向绑定：该元素的值改变，属性值不改变；只是从属性中获得一个值-->
    <input type="text" v-bind:value="day">
    <!--    v-model双向绑定：该元素的值改变，属性值也改变；-->
    <input type="text" v-model="day">
    <hr>
    <input type="button" v-on:mouseover="add" value="增加" >
    <input type="button" @click="decrease" value="减少">
</div>

</body>
<script type="text/javascript">
// vue自带对象：vue；
    var vue = new Vue({
   
        // el:"#元素id"--绑定元素，vue对象中的属性和方法可以渲染和运行的元素范围
        "el":"#d1",
        // data:当前vue实例的属性键值对
        "data":{
   
            month:"3",
            day:"2",
            weather:"晴朗",
            location:{
   city:"上海",area:"宝山"}
        },
        "methods":{
   
            add:function () {
   
                //当前vue实例的属性引用：this.属性名
                this.day++;
            },
            decrease:function () {
   
                this.day--;
            }
        }
    });

    var sex = "男";

    var person= {
   
        stuname:"zoya",
        age:23,
        sex:"女",
        show:function () {
   
            //方法中调用实例对象的属性必须加this，不像java中默认银行一个this，JavaScript默认寻找的是同名全局变量而非本类属性。
            console.log(this+"==="+this.age+sex);
        }
    };

    person.show();
//    [object Object]===23男
</script>
</html>