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 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
随机推荐
- Laravel 项目开发环境配置
1.首先安装Laravel 依赖管理包工具 Composer (前提是本地装好了PHP php -v) php -r "copy('https://install.phpcomposer. ...
- ubuntu18.04 server配置静态ip,新的网络工具netplan的使用方法【转:http://forum.ubuntu.org.cn/viewtopic.php?t=487463】
最新发布的ubuntu18.04 server,启用了新的网络工具netplan,对于命令行配置网络参数跟之前的版本有比较大的差别,现在介绍如下:1.其网络配置文件是放在/etc/netplan/50 ...
- 【ARTS】01_30_左耳听风-201900603~201900609
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- iOS-UIScrollView+UIPageControl简单实现
#import "MJViewController.h"#import "RootViewController.h" @interface MJViewCont ...
- tomcat性能优化参数
线上环境使用默认tomcat配置文件,性能很一般,为了满足大量用户的访问,需要对tomcat进行参数性能优化,具体优化的地方如下: Linux内核的优化 服务器资源JVM 配置的优化 Tomcat参数 ...
- Leetcode 224/227/772 计算器
题目描述 Leetcode 224 Leetcode 224: 这里想让我们实现一个基础的计算器,来计算给定的字符串. 给定的字符串中包含 ( ) + - 和非负整数和空格. # Example 1: ...
- Reporting Service 2016 匿名访问配置
环境:SQL SERVER 2016 一.修改配置文件 需要修改的配置文件目录C:\Program Files\Microsoft SQL Server\MSRS13.MSSQLSERVER\Repo ...
- nssm使用,安装服务、删除服务
安装服务参考 nssm设置solr开机启动服务 删除服务 Windows删除服务 sc delete 服务名 nssm删除服务 nssm remove 服务名 nssm常用命令: nssm insta ...
- php 获取文件mime类型的方法
php 获取文件mime类型的方法 使用fileinfo需要安装php_fileinfo扩展. 如已安装可以在extension_dir目录下找到php_fileinfo.dll(windows),f ...
- 《Mysql 一条 SQL 更新语句是如何执行的?(Redo log)》
一:更新流程 - 对于更新来说,也同样会根据 SQL 的执行流程进行. - - 连接器 - 连接数据库,具体的不做赘述. - 查询缓存 - 在一个表上有更新的时候,跟这个表有关的查询缓存会失效. - ...