起步

  1. var vm = new Vue({
  2.   // 选项
  3. })
  4. #每个Vue应用都需要通过实例化Vue来实现，语法格式继承原生js

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. 	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10.     <div id="app">
  11.         <h1>site: {{ site }}</h1>
  12.         <h1>url: {{ url }}</h1>
  13.         <h1>{{ details() }}</h1>
  14.     </div>
  15.  
  16.     <script>
  17.         var vm = new Vue({
  18.             el: '#app',
  19.             data: {
  20.                     site: "jabbok blog",
  21.                     url: "www.jabbok.com",
  22.             },
  23.             methods: {
  24.                 details:function () {
  25.                     return this.site + "- for ops & dev!";
  26.                 }
  27.             }
  28.         })
  29.     </script>
  30. </body>
  31. </html>
  32. #el：就是DOM元素中的id，在这个例子中，vue的全部改动都会在这个id为app的div中产生影响。
  33. #data:定义属性，将DOM中{{}}中的元素进行渲染替换
  34. #methods：定义函数，这里是details()，可以通过return返回函数值，这里返回一个拼接字符串

　　

模板语法-插值

文本

  1. <div id="app">
  2.   <p>{{ message }}</p>
  3. </div>
  4. #最常见的数据绑定就是使用{{}}的文本插值

　　

html

  1. <div id="app">
  2.      <div v-html="message"></div>
  3. </div>
  4.  
  5. <script>
  6.     var vm = new Vue({
  7.         el: '#app',
  8.         data: {
  9. 			message: "<h1>jabbok cnblog</h1>",
  10.         },
  11. })
  12. </script>
  13. #在html标签中使用v-html属性，将vue中的data以html代码输出

　　

模板语法-指令

指令是带有v-前缀的特殊属性，用于在表达式改变时，将某些行为应用到DOM上。

v-if

  1.     <div id="app">
  2.         <p v-if='seen'>this is v-if:seen</p>
  3.         <p v-else>this is v-else:notseen</p>
  4.     </div>
  5.  
  6.     <script>
  7.         var vm = new Vue({
  8.             el: '#app',
  9.             data: {
  10.                 seen: true,
  11.                 }
  12.     })
  13.     </script>
  14.  
  15. #v-if决定一个DOM是否被销毁，通过true和false来决定
  16. #如果id中有velse，当v-if为fasle，则显示v-else中的内容
  17. #vm.seen被重置后，DOM元素随即改变

　　

　　

v-model

在表单空间元素上创建双向数据绑定。

  1.     <div id="app">
  2.         <input v-model='message'>
  3.         <p>{{message}}</p>
  4.     </div>
  5.  
  6.     <script>
  7.         var vm = new Vue({
  8.             el: '#app',
  9.             data: {
  10.                 message:'Hello Vue.js!'
  11.                 },
  12.             methods:{
  13.                 ReverseFunc() {
  14.                     this.message = this.message.split(' ').reverse().join(' ')
  15.                 }
  16.             }
  17.         }
  18.         )
  19.     </script>
  20. #这是一个双向绑定，视图上（input）的值改变，会同步改变vue里的值，然后又反应到<p>中的值

　　

v-bind

v-bind里引入新的概念-参数。和指令用冒号分开

  1. <div id="app">
  2.       <p v-bind:title='title'>one line</p>
  3.       <a v-bind:href='url'>baidu</a>
  4. </div>
  5.  
  6. <script>
  7.     var vm = new Vue({
  8.         el: '#app',
  9.         data: {
  10.             title: "this is a v-bind",
  11.             url: 'http://baidu.com',
  12.  
  13.             }
  14. })
  15. </script>
  16. #参数title、url被绑定，当vue中的data被改变，就会马上响应到DOM

　　

v-for

  1. <div id="app">
  2.     <ol>
  3.         <li v-for="name in names">{{ name.value }}</li>
  4.     </ol>
  5. </div>
  6.  
  7. <script>
  8.     var vm = new Vue({
  9.         el: '#app',
  10.         data: {
  11.             names:[
  12.                 {value: 'jab'},
  13.                 {value: 'eric'},
  14.                 {value: 'lee'}
  15.             ]
  16.             }
  17. })
  18. </script>
  19. #names的每个name是一个键值对，在DOM中把每个name.value输出

　　

v-on

添加事件监听器，响应事件

  1.     <div id="app">
  2.         <p>{{ message }}</p>
  3.         <button v-on:click='ReverseFunc'>submit</button>
  4.     </div>
  5.  
  6.     <script>
  7.         var vm = new Vue({
  8.             el: '#app',
  9.             data: {
  10.                 message:'Hello Vue.js!'
  11.                 },
  12.             methods:{
  13.                 ReverseFunc:function(){
  14.                     this.message = this.message.split(' ').reverse().join(' ')
  15.                 }
  16.             }
  17.         }
  18.         )
  19.     </script>
  20. #点击之后，触发ReverseFunc方法，将vm.message处理之后马上响应到DOM

　　

模板语法-实时监听

  1.     <div id="app">
  2.  
  3.         <p>{{message}}</p>
  4.         <p>{{ReverseFunc}}</p>
  5.         <p>{{ReverseFunc2()}}</p>
  6.     </div>
  7.  
  8.     <script>
  9.         var vm = new Vue({
  10.             el: '#app',
  11.             data: {
  12.                 message:'Hello Vue.js!'
  13.                 },
  14.             computed:{
  15.                 ReverseFunc() {
  16.                     return this.message.split(' ').reverse().join(' ')
  17.                 }
  18.             },
  19.             methods:{
  20.                 ReverseFunc2(){
  21.                     return this.message.split(' ').reverse().join(' ')
  22.                 }
  23.             }
  24.         }
  25.         )
  26.     </script>
  27. #ReverseFunc是计算属性
  28. #ReverseFunc2是使用方法
  29. #两种效果一样，但计算属性是依赖缓存，方法是每次重新调用
  30. #所以计算属性性能好一点

　　

  1.     <div id="app">
  2.         <input v-model='message'>
  3.         <p>{{ReverseFunc}}</p>
  4.     </div>
  5.  
  6.     <script>
  7.         var vm = new Vue({
  8.             el: '#app',
  9.             data: {
  10.                 message:'Hello Vue.js!',
  11.                 ReverseFunc:''
  12.                 },
  13.             watch:{
  14.                 message(){
  15.                     this.ReverseFunc = this.message.split(' ').reverse().join(' ')
  16.                 }
  17.             }
  18.         }
  19.         )
  20.     </script>
  21. #在watch里以监听属性为名的函数，然后再函数体做具体运算
  22. #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. AndroidPageObjectTest_TimeOutManagement.java

    以下代码使用ApiDemos-debug.apk进行测试 //这个脚本用于演示PageFactory的功能:设置timeout时间. package com.saucelabs.appium; imp ...

  2. 将自定义参数从uboot传入kernel的并读取的方法【转】

    本文转载自:http://blog.csdn.net/qq_29729577/article/details/50580727 希望朋友们多多指点,好的技术或心得一起分享: uboot向kernel传 ...

  3. LightOJ1259 Goldbach`s Conjecture —— 素数表

    题目链接:https://vjudge.net/problem/LightOJ-1259 1259 - Goldbach`s Conjecture    PDF (English) Statistic ...

  4. hdu1015 Safecracker —— 回溯

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1015 代码1: #include<stdio.h>//hdu1015 #include&l ...

  5. ckplayer 中的style.swf 中的 style.xml 中的修改方法

    style.swf ---- > style.zip ---- > 解压成文件夹 ---- > 打开style.xml ---- > 修改 最重要的是修改保存style.xml ...

  6. hdu 1029 Ignatius and the Princess IV（排序）

    题意:求出现次数>=(N+1)/2的数 思路:排序后,输出第(N+1)/2个数 #include<iostream> #include<stdio.h> #include ...

  7. H3C-端口镜像

    本地端口镜像配置举例 配置Switch: <Sysname> system-view [Sysname] mirroring-group 1 local # 创建本地镜像组 [Sysnam ...

  8. defaultdict & Counter

    在使用python原生的数据结构dict的时候,如果d[key]这样的方式访问,当指定的key不存在时,会抛出keyError异常.但是如果使用defaultdict(导入collections),只 ...

  9. 最新版ADT(Build: v22.6.2)总是引用appcompat_v7的问题

    昨天在ADT Manager里更新了一些组件,结果ADT不支持.索性直接下载了最新的ADT.但是发现无论创建什么类型的应用(无论支持的最低API是多少,或者是不是用模板),都会在创建应用的同时创建一个 ...

  10. bootstrap学习大纲

    bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2. ...