Vue.js菜鸟教程自学（一）

导入js:
一、hello vue

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body><div id="app"><p>{{ message }}</p></div>
<script>new Vue({el: '#app',data:{message:'Hello Vue.js!'}})
</script>
</body>
</html>

二、vue起步
1.每个 Vue 应用都需要通过实例化 Vue 来实现。
2.Vue构造器中有一个el参数来确定元素
用data定义属性，methods定义函数，{{}}用于输出对象属性和函数返回值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
Vue构造器:<div id="vue_det"><h1>site:{{ site }}</h1><h1>url:{{ url }}</h1><h1>{{ details() }}</h1><h1>answer:{{ self() }}</h1></div>
Vue事例创建：<div class="vue2"><h1>site:{{ site2 }}</h1><h1>url:{{ url2 }}</h1></div><script type="text/javascript">var vm = new Vue({el:'#vue_det',data:{site:"菜鸟教程",url:"www.runoob.com",ale:"10000"},methods:{details:function(){return this.site+"技术不是梦"},self:function(){var x=1,y=2;return x+y;}}})var data2 = {site2:"菜鸟教程2",url2:"www2"}var vm2 = new Vue({el:'.vue2',data : data2})console.log(vm2.site2===data2.site2);vm2.site2="xxxx";</script>
</body>
</html>

3.当一个Vue实例被创建时，他向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生变化时，html视图将也会产生相应的变化。
4.除了数据属性，Vue实例还提供了一些有用的实例属性和方法。他们的前缀都是$，以便于用户定义的属性分开来。
三、Vue模板语法
1.插值：{{}}
使用v-html来输出html代码
属性：HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">.class1{background: #444;color: #eee;}.class2{background:red;color: #000;}
</style>
<body><div id="app"><label>修改颜色</label><input type="checkbox" v-model="use" id="r1"><br><br><div v-bind:class="{'class1':use}"><div v-bind:class="{'class2':!use}">v-bind:class指令</div></div></div><script type="text/javascript">new Vue({el:'#app',data:{use:false}})</script>
</body>
</html>

表达式：Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<style type="text/css">#list-1{background: red;}
</style><div id="app">{{5+5}}<br>{{ok ? 'YES':'NO'}}<br>{{message.split('').reverse().join('')}}<div v-bind:id="'list-'+id">{{message}}</div></div><script type="text/javascript">new Vue({el:'#app',data:{ok:true,message:'RUNOOB',id:1}})</script>
</body>
</html>

2.指令
指令是带有v-前缀的特殊属性。
指令用于在表达式的值改变时，将默写行为应用到DOM上。如下例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body><div id="app"><p v-if="seen">现在你看到我了</p><p v-if='!seen'>xxxxxxxx</p></div>
</body>
<script type="text/javascript">new Vue({el:'#app',data:{seen:true}})
</script>
</html>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
2.参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body><div id="app"><pre><a v-bind:href="url">菜鸟教程</a></pre></div><script type="text/javascript">new Vue({el:'#app',data:{url:'http://www.runoob.com'}})</script>
</body>
</html>

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

在这里参数是监听的事件名。
3.修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

````

Vue.js菜鸟教程自学（一）相关推荐

Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
Vue.js(菜鸟自学)
Vue.js 教程 | 菜鸟教程很好用,有自己内部编辑器,可以直接测试代码当然也可以自己编写,想到哪写到哪改到哪 17.9.7
Vue.js 入门教程
Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 A ...
Vue.js 系列教程 3：Vue-cli，生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
Vue.js 系列教程 4：Vuex
原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程 ...
Vue.js安装教程
目的: 记录使用npm安装方式安装Vue.js的过程,方便参考和借阅 No 1. 安装Node.js (如果电脑上已经安装了npm环境的同学,就不用再次安装,可以跳过此步骤直接到No.2) 1.1 ...
根据菜鸟教程自学html的目录
说明根据HTML 教程 | 菜鸟教程 (runoob.com)自学,制作的目录和简要说明. 文章目录说明 html简介实例解析什么是html html标签 html元素 web浏览器 Html ...

Vue.js菜鸟教程自学（一）

Vue.js菜鸟教程自学（一）相关推荐

最新文章

热门文章