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 {} | 组建中常用的方式,会在组建中进行详解 |
今天就先写这么多,都是比较基础的内容,难免有错误的地方也属正常,毕竟是搞程序,不是做学问,以实际运用为主。
对于编程学习来讲,没有捷径可以走,只有不断的练习,从最简单的练习、学习、发现问题、解决问题,不要在乎那种语言是最好的语言。
那不重要,我是这么认为的,重要的是你怎么运用自如!
vue基本语法概要(一)的更多相关文章
- 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 ...
- idea 添加 VUE 的语法支持和开发
<一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- JavaScript语言精髓(1)之语法概要拾遗(转)
JavaScript语言精髓(1)之语法概要拾遗 逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- idea 添加 VUE 的语法
1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...
- Vue模板语法(一)
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
随机推荐
- 多线程分页处理批量数据--jdbc方式
/** * 同步数据信息到ES * @return */ public boolean syncNhReportSeessToEs(){ long begin = System.currentTime ...
- MapReduce\Tez\Storm\Spark四个框架的异同
1) MapReduce:是一种离线计算框架,将一个算法抽象成Map和Reduce两个阶段进行 处理,非常适合数据密集型计算. 2) Spark:MapReduce计算框架不适合迭代计算和交互式计算, ...
- mysql命令、mysqldump命令找不到解决
1.解决bash: mysql: command not found 的方法 [root@DB-02 ~]# mysql -u root -bash: mysql: command not found ...
- 【c# 学习笔记】使用virtual和override关键字实现方法重写
只有基类成员声明为virtual或abstract时,才能被派生类重写:而如果子类想改变虚方法的实现行为,则必须使用override关键字. public class Animal { private ...
- 【MM系列】SAP 采购订单收货后不能修改价格的增强
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 采购订单收货后不能修改价格的 ...
- 最新 美柚java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 美柚等10家互联网公司的校招Offer,因为某些自身原因最终选择了 美柚.6.7月主要是做系统复习.项目复盘.LeetCo ...
- CNN-4: GoogLeNet 卷积神经网络模型
1.GoogLeNet 模型简介 GoogLeNet 是2014年Christian Szegedy提出的一种全新的深度学习结构,该模型获得了ImageNet挑战赛的冠军. 2.GoogLeNet 模 ...
- MySQL(二) decimal数据默认处理
create table decimal_test(id int auto_increment PRIMARY key,score decimal(5,2) -- 取值范围是 -999.99 到 99 ...
- TypeScript symbol类型
自ECMAScript 2015(ES6)起,symbol成为了一种新的原生类型,就像基本类型number和string一样. ⒈介绍及使用方式 TypeScript中使用symbol类型和JavaS ...
- 第五章:标准I/O库
本章用于解析C语言标准I/O库,之所以在UNIX类系统的编程中会介绍C语言标准库,主要是因为UNIX和C之间具有密不可分的关系. 标准I/O库相比于操作系统的I/O库,具有更高的效率和可移植性,前者是 ...