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

第一种格式:

<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 {} 组建中常用的方式,会在组建中进行详解

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

vue基本语法概要(一)的更多相关文章

  1. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. idea 添加 VUE 的语法支持和开发

    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...

  3. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  4. JavaScript语言精髓(1)之语法概要拾遗(转)

    JavaScript语言精髓(1)之语法概要拾遗   逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...

  5. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  6. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  7. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  8. idea 添加 VUE 的语法

    1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...

  9. Vue模板语法(一)

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

随机推荐

  1. 29 Flutter Dialog AlertDialog 、SimpleDialog、showModalBottomSheet、showToast

    pubspec.yaml fluttertoast: ^ Dialog.dart import 'package:flutter/material.dart'; import 'package:flu ...

  2. Javescript——API连接 && json数据处理(待续)

    原文链接1:How to Connect to an API with JavaScript 原文链接2:How to Use the JavaScript Fetch API to Get JSON ...

  3. js 加法

    使用Number()函数可以解决这个问题,如下 var c = Number(a) + Number(b) 这样c得出来的解果是3,

  4. python学习笔记-电子书

    程序输入和raw_inoput() 内建函数 字符解释 f% :对应小数 >>> print "%s is number %d" % ("python& ...

  5. 【Leetcode_easy】643. Maximum Average Subarray I

    problem 643. Maximum Average Subarray I 题意:一定长度的子数组的最大平均值. solution1:计算子数组之后的常用方法是建立累加数组,然后再计算任意一定长度 ...

  6. 35个高级Python知识点总结

    原文地址:https://blog.51cto.com/xvjunjie/2156525 No.1 一切皆对象 众所周知,Java中强调“一切皆对象”,但是Python中的面向对象比Java更加彻底, ...

  7. 机器学习算法K-NN的一个使用实例:预测一个人是否患有糖尿病 (KNN-Predict whether a person will have diabetes or not )

    学习中...不断更新. 在糖尿病人的数据库中有几列是不能为0的 比如葡萄糖 胰岛素 身体指数和皮肤厚度.所以在数据预处理阶段需要对这些列的数据进行替换. remeber we did 12 minus ...

  8. hfile.block.cache.size - hbase调优

    1.一个regionserver上有一个blockcache和N个memstore,它们的大小之和必须小于heapsize* 0.8,否则hbase不能启动,因为仍然要留有一些内存保证其它任务的执行. ...

  9. springboot和solr结合测试使用

    首先新建springboot项目 新建webapp目录 springboot没有webapp目录——手动添加 web.xml <?xml version="1.0" enco ...

  10. linux 环境下jmeter+ant+jenkins

    一.linux下的jenkins的安装: 下载链接:https://pan.baidu.com/s/1qZItZOC 密码:58da Jenkins 下载网址: http://jenkins-ci.o ...