vue基本语法概要(一)

先看两种代码,再进行讲解

第一种格式:

<template >
  <div>
    <div v-for=" item in sites ">
      <li>{{item.name}}</li>
      <li>---------</li>
    </div>
  </div>
</template>
<script>
export default {
  name: "v-if",
  data() {
    return {
      sites: [{ name: "goolge" }, { name: "baidu" }, { name: "cnlinfo" }]
    };
  }
};
</script>

 第二种格式:

<div id="app">
          <li>{{mesg}}</li>
          <li>---------</li>
        </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:"跟我学vue"
        })
    </script>

我们可以看到语法有多种方式,其中网上基础教程都是第二种,第一种呢,需要安装和配置才可以。具体配置请参考我第上一篇文章。
下面我们讲一下里面的基本关键语法: 

关键字 用途
new Vue({}) 用于实例化的,学过c#等语言的会比较清楚
el参数 DOM元素中的ID
data 用于定义属性,或者值
methods 故名思议就是函数或者c#的方法,这里我统称方法,毕竟做后端习惯了,不想改口了
return 返回数据或终止方法逻辑运行
{{}} 用来输出对象属性或方法返回的值
export default {} 组建中常用的方式,会在组建中进行详解

今天就先写这么多,都是比较基础的内容,难免有错误的地方也属正常,毕竟是搞程序,不是做学问,以实际运用为主。
对于编程学习来讲,没有捷径可以走,只有不断的练习,从最简单的练习、学习、发现问题、解决问题,不要在乎那种语言是最好的语言。
那不重要,我是这么认为的,重要的是你怎么运用自如!

猜你喜欢

转载自www.cnblogs.com/c546170667/p/11285872.html