Vue.js下载方式及基本概念
Vue.js 简介
说明及下载
Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html
Vue.js基本概念
我们下载了vue.js后，需要在页面上通过script标签引入vue.js，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。
script type="text/javascript" src="js/vue.min.js"></script
Vue代码实例（创建）
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
//el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
//接下来就可用Vue来做一些为所欲为的事情啦
el:'#app',
data : {message:'好湿呀'}
});
</script>数据与方法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。
Vue实例代码（方法）
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
div id="app"
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
/div
Vus.js模板语法
模板语法指的是如何将数据放入html中
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，例如：
{{ msg }}
插入的值当中还可以写表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">链接文字
指令
指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。
<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮
我的小boby ，有不懂的，欢迎下方评论！！！
Vue.js下载方式及基本概念的更多相关文章
- vue.js下载及安装配置
环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue.js 面试题整理
Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gzip压缩等. dist 文件夹 ...
- Vue.js面试整理
Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gzip压缩等. dist 文件夹 ...
- 整理Vue.js 面试题
Vue.js 面试题整理 Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gz ...
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- 转： Vue.js——60分钟组件快速入门（上篇）
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js学习与理解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不 ...
随机推荐
- Debian 8 升级到 9 Debian 9 How to upgrade Debian 8 Jessie to Debian 9 Stretch
How to upgrade Debian 8 Jessie to Debian 9 Stretch Contents 1. Objective 2. What's New 3. Preparatio ...
- Android Studio插件之MVPHelper，一键生成MVP代码
MVP盛行,听到的最多的抱怨就是咋要写这么多接口,那么本文作者提供了一个插件,自动生成这些接口的声明.感兴趣的还可以学习该插件的写法,按照自己平时的需求修改,提供开发效率. MVPHelper 一款I ...
- iphone使用linux命令apt-get也没有问题
那么教程开始: 首先安装cydia这个越了yu就有自带的哦 然后添加源,比如apt.91.我忘了,大家可以在http://frank-dev-blog.club/?post=45找一个 查找termi ...
- 11 tensorflow在tf.while_loop循环(非一般循环)中使用操纵变量该怎么做
代码(操纵全局变量) xiaojie=1 i=tf.constant(0,dtype=tf.int32) batch_len=tf.constant(10,dtype=tf.int32) loop_c ...
- 4.Servlet过滤器
1.Servlet 编写过滤器 Servlet 过滤器是可用于 Servlet 编程的 Java 类,有以下目的: 在客户端的请求访问后端资源之前,拦截这些请求. 在服务器的响应发送回客户端之前,处理 ...
- es知识点
版权声明:本文为博主原创文章,未经博主允许不得转载.转载请务必加上原作者:铭毅天下,原文地址:blog.csdn.net/laoyang360 https://blog.csdn.net/wojius ...
- MySQL案例09:Last_IO_Error: Got fatal error 1236 from master when reading data from binary log
刚处理完“挖矿”事件,在做最后一个MySQL NBU备份的时候,发现从库有问题,好奇的是怎么主从状态异常没有告警呢?先不管这么多了,处理了这个问题再完善告警内容. 一.错误信息 从库show slav ...
- [翻译] IDMPhotoBrowser
IDMPhotoBrowser IDMPhotoBrowser is a new implementation based on MWPhotoBrowser. IDMPhotoBrowser实现了图 ...
- Linux 环境部署记录（二） - NFS文件共享
NFS文件共享服务 假设现有两台服务器IP地址分别为 192.168.0.2 和 192.168.0.3,192.168.0.2作为Server,192.168.0.3为Client,则: 两台机器都 ...
- Vue安装以及Vue项目创建以及Vue Devtools安装
这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...