vue教程1-初体验
起步
var vm = new Vue({
// 选项
})
#每个Vue应用都需要通过实例化Vue来实现，语法格式继承原生js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head> <body>
<div id="app">
<h1>site: {{ site }}</h1>
<h1>url: {{ url }}</h1>
<h1>{{ details() }}</h1>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
site: "jabbok blog",
url: "www.jabbok.com",
},
methods: {
details:function () {
return this.site + "- for ops & dev!";
}
}
})
</script>
</body>
</html>
#el：就是DOM元素中的id，在这个例子中，vue的全部改动都会在这个id为app的div中产生影响。
#data:定义属性，将DOM中{{}}中的元素进行渲染替换
#methods：定义函数，这里是details()，可以通过return返回函数值，这里返回一个拼接字符串
模板语法-插值
文本
<div id="app">
<p>{{ message }}</p>
</div>
#最常见的数据绑定就是使用{{}}的文本插值
html
<div id="app">
<div v-html="message"></div>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: "<h1>jabbok cnblog</h1>",
},
})
</script>
#在html标签中使用v-html属性，将vue中的data以html代码输出
模板语法-指令
指令是带有v-前缀的特殊属性，用于在表达式改变时，将某些行为应用到DOM上。
v-if
<div id="app">
<p v-if='seen'>this is v-if:seen</p>
<p v-else>this is v-else:notseen</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
seen: true,
}
})
</script> #v-if决定一个DOM是否被销毁，通过true和false来决定
#如果id中有velse，当v-if为fasle，则显示v-else中的内容
#vm.seen被重置后，DOM元素随即改变
v-model
在表单空间元素上创建双向数据绑定。
<div id="app">
<input v-model='message'>
<p>{{message}}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message:'Hello Vue.js!'
},
methods:{
ReverseFunc() {
this.message = this.message.split(' ').reverse().join(' ')
}
}
}
)
</script>
#这是一个双向绑定，视图上（input）的值改变，会同步改变vue里的值，然后又反应到<p>中的值
v-bind
v-bind里引入新的概念-参数。和指令用冒号分开
<div id="app">
<p v-bind:title='title'>one line</p>
<a v-bind:href='url'>baidu</a>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
title: "this is a v-bind",
url: 'http://baidu.com', }
})
</script>
#参数title、url被绑定，当vue中的data被改变，就会马上响应到DOM
v-for
<div id="app">
<ol>
<li v-for="name in names">{{ name.value }}</li>
</ol>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
names:[
{value: 'jab'},
{value: 'eric'},
{value: 'lee'}
]
}
})
</script>
#names的每个name是一个键值对，在DOM中把每个name.value输出
v-on
添加事件监听器，响应事件
<div id="app">
<p>{{ message }}</p>
<button v-on:click='ReverseFunc'>submit</button>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message:'Hello Vue.js!'
},
methods:{
ReverseFunc:function(){
this.message = this.message.split(' ').reverse().join(' ')
}
}
}
)
</script>
#点击之后，触发ReverseFunc方法，将vm.message处理之后马上响应到DOM
模板语法-实时监听
<div id="app">
<p>{{message}}</p>
<p>{{ReverseFunc}}</p>
<p>{{ReverseFunc2()}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'Hello Vue.js!'
},
computed:{
ReverseFunc() {
return this.message.split(' ').reverse().join(' ')
}
},
methods:{
ReverseFunc2(){
return this.message.split(' ').reverse().join(' ')
}
}
}
)
</script>
#ReverseFunc是计算属性
#ReverseFunc2是使用方法
#两种效果一样，但计算属性是依赖缓存，方法是每次重新调用
#所以计算属性性能好一点
<div id="app">
<input v-model='message'>
<p>{{ReverseFunc}}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message:'Hello Vue.js!',
ReverseFunc:''
},
watch:{
message(){
this.ReverseFunc = this.message.split(' ').reverse().join(' ')
}
}
}
)
</script>
#在watch里以监听属性为名的函数，然后再函数体做具体运算
#watch用于更大开销的操作
vue教程1-初体验的更多相关文章
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- VUE 3.0 初体验之路
在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势, 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -v ...
- webpack教程(一)——初体验
首先全局安装webpack,再npm初始化一个项目,并局部安装webpack开发工具 $ npm install webpack -g npm init (项目名称) $ npm install we ...
- Vue Cli 3 初体验（全面详解）
vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- Vue.js-Vue的初体验
我是参考https://www.cnblogs.com/kidney/p/6052935.html 这位大神的 最开始接触vue的时候,是他的input框输入的文字和旁边的span展示的文字同步,当时 ...
- HanLP使用教程——NLP初体验
话接上篇NLP的学习坑 自然语言处理(NLP)--简介 ,使用HanLP进行分词标注处词性. HanLP使用简介 HanLP是一系列模型与算法组成的NLP工具包,目标是普及自然语言处理在生产环境中的应 ...
- Docker深入浅出系列教程——Docker初体验
我是张飞洪,钻进浩瀚代码,十年有余,人不堪其累,吾不改其乐.我喜欢把玩代码,琢磨词句!代码算法让我穿透规律,文章摘句让我洞察人情.如果你觉得和我的看法不一样,请关注我的头条号,那我们一定合得来. Do ...
- Apache Flink教程----安装初体验
1.window 版本安装 https://flink.apache.org/downloads.html#apache-flink-164 D:\flink-1.6.2-bin-scala_2\fl ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
随机推荐
- Java+Jsoup实现网页内容抓取
不知不觉毕业快一年了,工作逐渐趋于平淡,从一个对编程了解得很少甚至完全一窍不通的小小菜,终于成为了一枚小菜,总而言之,算是入了IT这一行.这大半年马马虎虎做了三个项目,有安卓项目,有Java Web项 ...
- curl上传图片(同域上传)
先研究完curl同域上传图片然后再研究curl跨域上传,先把同域上传代码总结如下: index.php <?php //图片上传 $url = "http://192.168.1.23 ...
- Codeforces Round #363 (Div. 2) B. One Bomb —— 技巧
题目链接:http://codeforces.com/contest/699/problem/B 题解: 首先统计每行每列出现'*'的次数,以及'*'出现的总次数,得到r[n]和c[m]数组,以及su ...
- Java应用架构设计模块化模式与OSGI摘录
在Java中,最适合模块化的单元就是Jar文件. 代码层面我们关注的太多了,熟练的开发人员现在很少争论使用模式的好处,也不再识别哪个模式适合当前需要,因为都能够本能地使用各种设计原则和模式,从GoF的 ...
- 如果后台用framset框架布局，session过期，整个跳出回 登录页面的方法
如果session过期了,登录页面会在framset框架的右边显示,只能用 js 来做,让整个框架跳出去: 然而,这里 js 必须要用“top”才可以,作用是让整个framset都跳转,直接用 win ...
- mysql : mysql 5.6.13 免安装版配置
前言:真正用到mysql是在公司的第二个项目下,具体的一些在之前的博客文章(http://www.cnblogs.com/zhengzeze/p/5623440.html)中也提到了,其中涉及到,免安 ...
- java中关键字volatile的误解和使用
在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...
- 搭建Linux的VMware Workstation Pro
搭建准备环境: 1.win10操作系统: 2.VMware Workstation Pro12: 下载地址 http://www.vmware.com/products/workstation/w ...
- 1.6 Hive配置metastore
一.配置 1.配置文件 #创建配置文件 [root@hadoop-senior ~]# cd /opt/modules/hive-0.13.1/conf/ [root@hadoop-senior co ...
- 3、webpack打包出的文件解析
分析打包后的结果,看看打包后的结果是什么东西 把打包后的结果.注释什么的删删‘’ 当前是一个匿名函数. 默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key.第二部分是我们的 ...