初识vue

最新推荐文章于 2024-02-03 14:49:17 发布

QM_姚丹

最新推荐文章于 2024-02-03 14:49:17 发布

阅读量248

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/qq_34475058/article/details/100665045

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

安装环境

首先安装node.js。
然后在cmd里面下命令npm install -g @vue/cli 或者用淘宝镜像cnpm install -g @vue/cli，默认选择defult就行
判断安装是否完成，用vue --version，查看vue版本
新建一个项目比如hello-world，vue3用这行命令，vue create hello-world
vue2用vue init webpack hello-world这个命令
运行项目，在terminal下运行这行命令，npm run serve，然后复制粘贴地址到浏览器上就好

编写代码

新建一个组件，界面代码结构如下

<template>
    <div>
        <!-- 编写html代码 -->
    </div>
</template>
<script>
// 编写js代码
export default {

    // 定义变量或者数据
  data() {
    return {
        msg:'测试'
    };
  },
    //定义调用的方法
  methods:{

  }
};
</script>
<style>
    /* 编写cssd代码 */
</style>

绑定数据，通过{{}}，将js的代码绑定到view上面。如下代码，div中间的值为测试

<template>
    <div>
        <!-- 编写html代码 -->
        <div>{{msg}}</div>
    </div>
</template>
<script>
// 编写js代码
export default {
    // 定义变量或者数据
  data() {
    return {msg:'测试'};
  },
};
</script>

点击事件可以通过两个属性来点击，一个是v-on:click或者用@click都行

<template>
    <div>
        <!-- 编写html代码 -->
        <button v-on:click="getMsg()">按钮</button>
        <button @click="getMsg()">再次点击</button>
    </div>
</template>
<script>
// 编写js代码
export default {
    // 定义变量或者数据
  data() {
    return {};
  },
  methods:{
		//定义一个方法
		//   getMsg:function(){
   		 //     alert("点击按钮")
    	//   }
    	//也可以直接省略function
      getMsg(){
          alert("点击按钮")
      }
      
  }
};
</script>
<style>
    /* 编写cssd代码 */
</style>

循环for语句，用v-for,后面的括号第一个参数是数组的每一条目，第二个参数是数组的下标

<template>
  <div>
    <!-- 编写html代码 -->
    <ol>
        <!-- item为数组的某一项，index为数组的下标 -->
      <li v-for="(item,index) in list3" :key="item.id">
        我时第{{index}}项，标题为{{item.title}}
        <!-- 下面数组嵌套的数组，content是起的别名，是数组的某一项 -->
        <div v-for="content in item.itemlist" :key="content.id">{{content}}</div>
      </li>
    </ol>
  </div>
</template>
<script>
// 编写js代码
export default {
  // 定义变量或者数据
  data() {
    return {
      list3: [
        {
          title: "第一课",
          itemlist: ["a", "b", "c"]
        },
        {
          title: "第二课",
          itemlist: ["1", "2", "3"]
        },
        {
          title: "第三课",
          itemlist: ["A", "B", "C"]
        }
      ]
    };
  },
  methods: {}
};
</script>

属性绑定 v-bind：，可以省略直接用：表示

<template>
  <div>
    <!-- 编写html代码 -->
    <!--用v-bind绑定title，title属性为msg，信息 -->
    <div v-bind:title="msg" ref="divClass">你好，属性</div>
    <!--省略v-bind的写法 如果flag为true，则这个div的class 为red,bulue。 divWidth定义宽度-->
    <div :class="{'red':flag,'blue':flag}" :style="{'width':divWidth+'px'}">綁定stytle</div>
  </div>
</template>
<script>
// 编写js代码
export default {
  // 定义变量或者数据
  data() {
    return {
      msg:"信息",
      flag:true,
      divWidth:200
    };
  },
  methods: {}
};
</script>
<style>
/* 编写css代码 */
.red {
  color: red;
}
.blue {
  background-color: blue;
}
</style>