Hello World
 
<body>
  <!-- 在angularJS中用ng-model -->
  <!-- {{mseeage?message:11}}支持三元表达式 -->
  <!--{{*}} 可以 只绑定一次 视图变化时不进行改变 -->
  <!--{{{}}} 绑定html标签 识别html标签 -->
<div class="app">
  <input type="text" v-model='message'>
  <!-- {{message}} -->
  <!-- <br> {{message?message:1}} -->
<br> {{*message}} {{{message}}} </div>
</body>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({ //实例 MVVM
      el: ".app",
      data: {
        // message: "333"
      message: "<h1>hello</h1>"
      }
   })
</script>
 
vue实例
 
<body>

<div id="app">{{message.age}}</div>

<script src="vue1.0.28.js"></script>
<script>
var mess = {
age: 18
}
var vm = new Vue({
el: "#app",
     data: {
      message: mess
      }
   })
    // vm.message.age = 100;
    //我们当前实例vm和mess这个对象指向的是同一内存空间     //在实例创建后挂载以前不存在的属性是不会刷新视图的
console.log(vm.message == mess)
</script>
</body>
 
vue属性和方法
 
<body>
<div id="app">
  {{message}}
  <input type="text" v-model='message'><br> {{age}}
</div> <script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
    message: "aaaa"
    }
})
//vm.$el 不能更改绑定数据的元素
console.log(vm.$el == document.getElementById("app")) //vm.$data 就是data对应的这个对象
console.log(vm.$data);
// vm.$data = { age: 200 } //可以直接更改对象指定
// console.log(vm.$data);
//vm.$watch 监听数据变化
vm.$watch('message', function(newValu, oldVlue) {
    console.log(newValu, oldVlue)
})
</script>
</body>
 
vue生命周期
 构建 new Vue()实例
观察数据 (observe Data)
初始化方法 (Init Events)
没有问题,开始创建,调用 created 方法
没发现有el元素,看是否有vm.$mount(el)方法 (这个方法的作用是就是告诉我们初始化开始,可以挂载数据了)
发现el元素,看是否有模版,开始编译模版
若有模版就替换,若没有模版就直接插进去
编译完成
插入文档中,然后调用ready()方法
调用vm.$destroy()就销毁了
先进行销毁,然后把事件、属性、子组件 去掉
最后销毁掉,完全死亡
created 先实例化,在实例化后(检测el)
vm.$mount('#app') 手动挂载实例
beforeCompile 开始编译之前
compiled 编译完成
ready 插入文档后
vm.$destory 手动销毁实例
destroyed 销毁实例
 
<body>
<div id="app">{{message}}</div>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
    data: {
      message: "sss"
  },
   created() {
      alert("1:创建实例")
  },
    beforeCompile() {
      alert("2:编译前")
  },
    compiled() {
      alert("3:编译完成")
  },
    ready() {
      alert("4:准备好了")
  },
    beforeDestroy() {
      alert("5:销毁前")
  },
    destroyed() {
      alert("6:销毁了")
  }
})
//手动挂载 el
vm.$mount("#app");
//销毁需要调用$destroy
vm.$destroy();
</script>
</body>
 
 
 
属性的计算 
<body>
<div id="app">
  {{pages}}
  <input type="text" v-model="page">
</div>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
      page: 1,
      num: 2
   },
   computed: {
      pages: function() { //默认的方法是获取
      //在vm中所有的this指向的都是当前实例
   return this.page * this.num
    }
  }
})
</script>
</body>
computed 的 set get 方法
<body>
<div id="app">
  {{pages}}
  <input type="text" v-model="num">
</div>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
      page: 1,
      num: 2
   },
    computed: {
      pages: {
        get() { //默认的方法是获取
      //在vm中所有的this指向的都是当前实例
        return this.page * this.num
      },
    set(val) {
      //在设置方法去更改data中数据
      this.num = val;
      }
    }
  }
}) vm.pages = 9;
</script>
</body>
 
 
vue 解决加载标签时的闪烁问题
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
    display: none;
}
</style>
</head> <body>
<div id="app">
  {{message}}
  <!-- 在ng中 ng-bind可以解决单个标签闪烁问题 -->
  <!-- v-text 只能解决单个闪烁问题 -->
  <!-- 在ng中 ng-cloak 可以解决多级数据闪烁问题 -->
  <!-- v-cloak 可以解决多级数据闪烁问题 -->
  <div v-text="message"></div>
  <div v-cloak>
  {{message}}
  </div>
</div> <script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
      message: "涉及到极点拉萨警方立即as啊打算减肥阿道夫啊"
    }
  })
</script>
</body>
 
v-if v-else v-show template语法 以及 v-if 和 v-show的区别

<body>
<div id="app">
  <div v-if="false">
  我是内容
  </div>
  <div v-show="false">
  我是内容
  </div>   <!-- template标签是不会被渲染的 解决无意义的空标签问题 template一般配合v-else使用 -->
  <!-- 在 v-show上不支持template语法 -->
  <template v-if="true">
  <div>1</div>
  <div>2</div>
  </template>   <!-- v-else要跟在v-if后面,也可以跟在v-show后面 -->
  <div v-else>
  如果template中 v-if的条件不成立 就显示 v-else
  </div>
</div> <script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
      message: "涉及到极点拉萨警方立即as啊打算减肥阿道夫啊"
    }
})
    // v-show/v-if的区别
    //v-show => ng-show 操作的是样式 (display:none) (一般作用于样式切换)
    //v-if => ng-if 操作的是DOM (如果条件不成立 就移除dom了) (一开始知道存在与否,不会去切换的时候用)
    //区别:v-if有更高的切换消耗 而v-show有更高的初始渲染消耗
</script>
</body>
 
 
遍历
 
<body>
  <!-- 在angularjs中,用ng-repeat vue中用 v-for -->
<div id="app">
  <template v-for=" (key,m) in datas">
    {{$index}}-{{key}}:{{$key}},{{m}}<br/>
  </template>
  <!-- $index 表示当前第几个 (在vue中 $odd $even $fist $last 都没有 -->
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
    el:"#app",
    data:{
      datas:{
        name:"test",
        age:"12"
      }
    }
})
</script>
</body>
 
遍历数组   (如果没有唯一的键供追踪,就要用track-by)
 
<body>
<div id="app">
    <!-- track-by 强制通过索引去遍历 -->
    <!-- 如果在数组中取到的值为相同的值 那么需要用到track-by 防止报黄报错 -->
  <ul v-for="(key,m) in datas" track-by="$index">
    <li>{{key}}:{{$index}}-{{m.name}}:{{m.price}}</li>
    <!-- 没有$key -->
  </ul>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
      el:"#app",
      data:{
        datas:[
          {name:"苹果",price:"90"},
          {name:"香蕉",price:"91"},
          {name:"橘子",price:"92"}
        ]
      }
  })
</script>
</body>
 
 
嵌套遍历
<body>
<div id="app">
  <div v-for="(key,mess) in datas">
    <div>{{$index}}:
      {{mess.name}}:{{mess.price}}
      <div v-for="mess2 in mess.type">
        <!-- 在父级写上索引 儿子可以拿到父亲的索引值 -->
        {{key}}:{{mess2}}
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
      el:"#app",
      data:{
        datas:[
          {name:"苹果",price:"90",type:["red","blue"]},
          {name:"香蕉",price:"91",type:["black"]},
          {name:"橘子",price:"92",type:["pink"]}
        ]
      }
  })
</script>
</body>
 
 
 
动态绑定数据 (v-bind)
 
<body>
<div id="app">
  <!-- v-bind绑定动态属性 (把src绑定到v-bind上后,等待数据加载完成,才去渲染数据,不用{{}} ) -->
  <!-- 可以直接使用:的方式直接进行绑定 动态去data上的值 -->
  <!-- <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="href">{{href}}</a> -->
  <img :src="imgUrl" alt="">
  <a :href="href">{{href}}</a>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
    el:"#app",
    data:{
      imgUrl:"https://blog.zachchan.com/wp-content/uploads/2017/12/201711071936012.png",
      href:"https://blog.zachchan.com"
    }
  })
</script>
</body>
 
 
绑定事件 (@,v-on:click 、methods)
 
<body>
<div id="app">
    <!-- v-on 绑定事件 :事件名字 -->
    <!-- v-on 执行方法的时候需要传递参数的时候添加(),
    如果不需要传递参数就不要写了,如果需要传递参数,我们要手动传递事件源 -->
    <!-- 我们可以通过@符号 取代 v-on: -->     <!-- <div v-on:click="add(1,$event)">hello Vue</div> -->
  <div @click="add(1,$event)">hello Vue</div>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
    el:"#app",
    data:{
      imgUrl:"https://blog.zachchan.com/wp-content/uploads/2017/12/201711071936012.png",
      href:"https://blog.zachchan.com"
  },
  methods:{
      //我们在vue中把方法都定义在methods对象中
    add:function(num,e){
      //e是事件源
      console.log(num,e)
      alert(100)
    }
  }
})
</script>
</body>

vue基础入门的更多相关文章

  1. vue基础入门(2.1)

    2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...

  2. vue基础入门(4)

    4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...

  3. vue基础入门(3)

    3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...

  4. vue基础入门(2.3)

    2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...

  5. vue基础入门(2.2)

    2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...

  6. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  7. Vue基础入门笔记

    不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...

  8. vue基础入门(1)

    1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...

  9. vue 基础入门(一)

    app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...

随机推荐

  1. THinkPHP的认识

    四中路由方式:http://网址/index.php?m=分组&c=控制器&a=操作方法(但是这个不安全,不推荐使用)http://网址/index.php/分组/控制器/操作方法(默 ...

  2. 利用python对excel进行数据剔除

    需求分析: 判断excel2表中的某个唯一字段是否满足条件,如果满足条件,就在excel1中进行查询,若存在excel中,就将该数据进行剔除. python脚本的实现: from __future__ ...

  3. makefile 中=与:=的差别

    1."=" make会将整个makefile展开后,再决定变量的值.也就是说,变量的值将会是整个makefile中最后被指定的值.看例子: x = foo y = $(x) bar ...

  4. Nginx配置优化及深入讲解,大家可以听一下

    随着访问量的不断增加,需要对Nginx和内核做相应的优化来满足高并发用户的访问,那下面在单台Nginx服务器来优化相关参数. 1)       Nginx.conf配置优化: worker_proce ...

  5. 数据库服务器---Tps

    事务处理系统:Transactionprocessingsystems(TPS) 提高事务处理效率与保证其正确性 在数据(信息)发生处将它们记录下来 通过OLTP产生新的信息 将信息保存到数据库中供其 ...

  6. HttpClient(一)HttpClient抓取网页基本信息

    一.HttpClient简介 HttpClient 是 Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包, 并且它支 ...

  7. Codeforces Gym 101521A Shuttle Bus

    题意:给定一个2*N的方格,从左上角开始走,有些格子不能走,问能否一次遍历所有能走的方格 在Gym上看到一场香港的比赛,很好奇就去看了一下,发现第一题很有趣,并且很水,似乎讨论一下奇偶性就行了,然后. ...

  8. 大数据学习系列之六 ----- Hadoop+Spark环境搭建

    引言 在上一篇中 大数据学习系列之五 ----- Hive整合HBase图文详解 : http://www.panchengming.com/2017/12/18/pancm62/ 中使用Hive整合 ...

  9. HDU_1698 Just a Hook(线段树+lazy标记)

    pid=1698">题目请点我 题解: 接触到的第一到区间更新,须要用到lazy标记.典型的区间着色问题. lazy标记详情请參考博客:http://ju.outofmemory.cn ...

  10. WAS集群系列(2):数据库连接低级错误——网络连接问题

    环境 项目点 指标 WAS版本号 7.0 应用server操作系统 Windows 2008 应用server系统位数 64bit 数据库server操作系统 CentOS 5.6 数据库版本号 Or ...