vue基本语法

开始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>
    <!-- 1.数据如何渲染页面 表达式{{}} -->
    <p>{{msg}}</p>
    <hr>绑定对象的属性
    <p>绑定对象的属性是这样{{stu.name+"/"+stu.age}}</p>
    <hr>
    <!-- 其它绑定 -->
    <!-- v-html 指令绑定元素的html  自动解析里面的标签 -->
    <p v-html="ht"></p>
    <p v-text="msg"></p>
    <hr>
    <!-- 2.属性绑定   动态操作元素属性   v-bind   简写为   ：-->
    <div v-bind:title="title"></div>
    <div :src="src"></div>
    <img :src="localsrc" alt>
    <hr>
    <!-- calss类名称绑定 -->
    <!-- 动态绑定多个class   class：变量 ， class：变量 -->
    <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>
    <!-- 循环渲染数据   v-for    v-repeat 循环多层数据 -->
    <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>