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 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
随机推荐
- Qt编写控件属性设计器1-加载插件
一.前言 加载插件是整个属性设计器的第一步要打通的功能,插件中的控件都加载不了,后面就别搞别玩下去了没法玩的,要从一个动态库中加载出来控件,肯定需要用到反射机制,以前做.NET开发的时候就觉得反射这个 ...
- 【Leetcode_easy】819. Most Common Word
problem 819. Most Common Word solution: class Solution { public: string mostCommonWord(string paragr ...
- 【c# 学习笔记】接口
一.什么是接口 接口 可以理解为对一组方法声明进行的同一命名,但这些方法没有提供任何实现.也就是说,把一组方法声明在一个接口中,然后继承于该接口的类都 需要实现这些方法. 例如,很多类型(比如int ...
- php验证码实例
验证码实例如下看不懂的先看gd库的那一篇,session不懂的看from提交的数据都哪里了那一篇,欢迎关注 index.php <!DOCTYPE html> <html lang= ...
- Unity接入九游SDK学习与踩坑
学习之路漫漫,应修之期远兮.持之以恒,方得始终. 这几日接入九游SDK,于浑浑噩噩中成长. 下面是步骤: 一:下载九游SDK 二:打开Android Studio新建一个工程,并且新建一个Androi ...
- mybatis 一对多,多对一配置
一. 简介: 本实例使用顾客和订单的例子做说明: 一个顾客可以有多个订单, 一个订单只对应一个顾客 二. 例子: 1. 代码结构图: 2. 建表语句: CREATE DATABASE test; US ...
- Codis-FE配置启动
生成配置信息: ./codis-admin --dashboard-list --zookeeper= | tee conf/codis.json 如果当前目录下还没有创建logs文件夹,请先创建lo ...
- zabbix 部署包安装
关于zabbix的安装方式,官网提供了几种方法,分别是:部署包安装.源码安装.容器安装.容器安装我之前已经写过一篇,而现在这一篇是关于部署包安装的. 按照官网的说法,我们需要如下几个步骤: ...
- v-CheckBox
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 控制台程序转化为windows服务
首先我们创建一个控制台应用程序WriteLog,然后添加windows服务LogService 新增的windows服务切换到代码视图,我这边用log4net进行的日志的记录 OnStart方式是服务 ...