起步

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-初体验的更多相关文章

  1. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  2. VUE 3.0 初体验之路

    在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势, 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -v ...

  3. webpack教程(一)——初体验

    首先全局安装webpack,再npm初始化一个项目,并局部安装webpack开发工具 $ npm install webpack -g npm init (项目名称) $ npm install we ...

  4. Vue Cli 3 初体验(全面详解)

    vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...

  5. 手动搭建webpack + vue项目之初体验

    在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...

  6. Vue.js-Vue的初体验

    我是参考https://www.cnblogs.com/kidney/p/6052935.html 这位大神的 最开始接触vue的时候,是他的input框输入的文字和旁边的span展示的文字同步,当时 ...

  7. HanLP使用教程——NLP初体验

    话接上篇NLP的学习坑 自然语言处理(NLP)--简介 ,使用HanLP进行分词标注处词性. HanLP使用简介 HanLP是一系列模型与算法组成的NLP工具包,目标是普及自然语言处理在生产环境中的应 ...

  8. Docker深入浅出系列教程——Docker初体验

    我是张飞洪,钻进浩瀚代码,十年有余,人不堪其累,吾不改其乐.我喜欢把玩代码,琢磨词句!代码算法让我穿透规律,文章摘句让我洞察人情.如果你觉得和我的看法不一样,请关注我的头条号,那我们一定合得来. Do ...

  9. Apache Flink教程----安装初体验

    1.window 版本安装 https://flink.apache.org/downloads.html#apache-flink-164 D:\flink-1.6.2-bin-scala_2\fl ...

  10. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

随机推荐

  1. Hadoop合并小文件的几种方法

    1.Hadoop HAR 将众多小文件打包成一个大文件进行存储,并且打包后原来的文件仍然可以通过Map-Reduce进行操作,打包后的文件由索引和存储两大部分组成: 缺点: 一旦创建就不能修改,也不支 ...

  2. Redis集群与事务

    redis集群对象JedisCluster不支持事务,但是,集群里面的每个节点支持事务 但是可以用第三方呀 启动下,然后看看事务问题: /usr/local/redis/bin/redis-serve ...

  3. SQLite多线程使用总结

    SQLite支持3种线程模式: 单线程:这种模式下,没有进行互斥,多线程使用不安全.禁用所有的mutex锁,并发使用时会出错.当SQLite编译时加了SQLITE_THREADSAFE=0参数,或者在 ...

  4. Python:循环

    循环语句:while循环,for循环 例1:求1-100的所有数的和 n = 100 sum = 0 count = 1 while count <= n: sum = sum + count ...

  5. multi_socket

    threading_test.py #threading #为什么在命令行可以执行,F5不能执行 #线程处理能导致同步问题 from socketserver import TCPServer,Thr ...

  6. HDU2444(二分图判定+最大匹配)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  7. kafka之二:Kafka 设计与原理详解

    一.Kafka简介 本文综合了我之前写的kafka相关文章,可作为一个全面了解学习kafka的培训学习资料. 转载请注明出处 : 本文链接 1.1 背景历史 当今社会各种应用系统诸如商业.社交.搜索. ...

  8. MVC中为自动生成实体类添加验证

    将额外的基于特性的元数据(象验证特性)施加到由VS设计器自动生成/维护的类的一个方法是,采用一个我们称之为“伙伴类(buddy classes)”的技术. 基本上来说,你创建另外一个类,包含你的验证特 ...

  9. web面试常见问题

    1事件继承 function ClassA(sColor) {     this.color = sColor;     this.sayColor = function () {        al ...

  10. 3.11-3.14 Hive 企业使用优化2

    一.查看HQL执行计划explain 1.explain hive在执行的时候会把所对应的SQL语句都会转换成mapreduce代码执行,但是具体的MR执行信息我们怎样才能看出来呢? 这里就用到了ex ...