vue基本语法

一时失言乱红尘 2022-03-01 06:40 172阅读 0赞

> 开始vue的征程啦，首先呢，你需要安装一下vue的环境（等我闲下来打算写一下教程，当然csdn也有很多优秀的教程，大家可以参照配置一下），vue需要利用es6的一些特性，之后就可以愉快的开始vue项目的开发了。

今天先介绍vue的一些基本语法：（还是以代码方式展示吧，需要注意的是，在终端下，利用npm run dev或者cnpm run dev先开启项目，要关闭项目时，注意Ctrl+c关闭项目，防止文件丢失，在.vue下进行编程，如果执行npm或者cnpm后未自动打开网页，可以试试访问ocalhost8080，就是终端显示栏显示的一行地址，推荐大家使用vscode， 良心软件，良心推荐）

<template>
      <div id="app">
        <h3>我是app组件</h3>
        <hr>
        
        <p>{
       {msg}}</p>
        <hr>绑定对象的属性
        <p>绑定对象的属性是这样{
       {stu.name+"/"+stu.age}}</p>
        <hr>
        
        
        <p v-html="ht"></p>
        <p v-text="msg"></p>
        <hr>
        
        <div v-bind:title="title"></div>
        <div :src="src"></div>
        <img :src="localsrc" alt>
        <hr>
        
        
        <div :class="{a_block:isshow}"></div>
        <div :class="isshow?'a_block':''"></div>
        
        <div :class="[isclass,'a_block','a_block']"></div>
        <div :class="[isclass,isclass,isclass]">11111</div>
        <div :class="isshow? isclass:''"></div>
        <hr>
        
        <ul>
          <li class="newli" v-for="(item,index) in students" :key="index">{
       {item.name+"/"+item.age}}</li>
        </ul>
        <hr>
        
        <ul>
          <li v-for="(item,index) in people" :key="index">
            <p>{
       {item.name}}</p>
            <p>{
       {item.age}}</p>
            <ul>
              <li v-for="(list,index) in item.score" :key="index">
                <p>{
       {list.name+"------"+list.s}}</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: "app",
      data() {
        return {
          msg: "我是app组件中的msg",
          stu: {
            name: "zhang",
            sex: "man",
            age: 21
          },
          ht: "<b>hello vue</b>",
          title: "我是vuetitle",
          src: "121242jifa",
          localsrc: require("./assets/未标题-3.png"),
          isshow: true,
          isclass: "blocknew",
          students: [
            { name: "zl", age: 10 },
            { name: "zl", age: 10 },
            { name: "zl", age: 10 },
            { name: "zl", age: 10 },
            { name: "zl", age: 10 },
            { name: "zl", age: 10 },
            { name: "zl", age: 10 },
            { name: "zl", age: 10 }
          ],
          people: [
            {
              name: "张三",
              age: 20,
              score: [
                { name: "math", s: 120 },
                { name: "chinese", s: 130 },
                { name: "english", s: 120 }
              ]
            }
          ]
        };
      }
    };
    </script>
    <style>
    .a_block {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: left;
      border: 1px solid red;
    }
    .blocknew {
      border-radius: 15px;
      float: left;
      width: 100px;
      height: 200px;
      background-color: yellow;
    }
    .newli {
      list-style: none;
    }
    </style>