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”语法 (双大括号) 的文本插值，例如：

插入的值当中还可以写表达式：

<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 自身不 ...

随机推荐

云数据库HBase助力物联网，免费申请中
云数据库HBase免费申请地址:https://cn.aliyun.com/product/hbase 引言从有线互联网到无线互联网,本质是加强了人与人之间随时随地的关联.下一个互联的时代是万物互联 ...
以local模式使用Xshell+Xmanager远程监控jvisualvm
使用jvisualvm的remote方式监控服务器端jvisualvm时,不是很方便,因此通过local方式,应该是正路. 一.服务器端(Linux,最小安装模式,没有图形界面) 1.安装xauth ...
2Exception in thread "main" java.lang.OutOfMemoryError: Java heap space
public class TestException { public static void main(String[] args) { String str = "1"; fo ...
OpenLDAP权限配置
安装好了openldap之后,就是对它进行配置了,其中一项就是设置访问控制,限制普通用户只能修改/访问他们能修改/访问的项.这就是ACL需要做的事情. 设置方法 1.可以将 include行放在/et ...
Vue2学习笔记:过渡效果css
过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...
Windows 7系统启动MongoDB失败解决办法？
问题现象: 1.在配置Python环境安装MongoDB时发现在“服务”里面手动启动失败,报错如下: 2.在cmd里面也无法启动,注意这里要以管理员身份启动cmd哦问题解决: 1.需要先在bin下执 ...
flask 的管理模块的功能add_template_global、send_from_directory
add_template_global方法全局模板函数 add_template_global 装饰器直接将函数注册为模板全局函数. add_template_global 这个方式是自定义的全局函 ...
centos7上安装 mysql
centos7上的安装是和其他的版本不一样的 ,因为centos上的安装与centos的操作是不通了的在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装 ...
django中的字段类型
from http://www.cnblogs.com/lhj588/archive/2012/05/24/2516040.html Django 通过 models 实现数据库的创建.修改.删除等操 ...
第0篇如何访问win10的C$等默认共享
近日换新机器,装了win10,但想从旧机器访问win10的\\ip\D$拷数据过去,首先发现怎么也连不上win10的共享,于是把win10防火墙中“文件和打印机共享”的“专用”(即内网)勾选上终于可以 ...

Vue.js下载方式及基本概念