一、前言

1、基本骨架

                        2、插值表达式{{ }}

　　　　　　   3、vue起的作用，在开发中充当的角色MVVM

                        4、基本指令

                             

二、基础内容

1、基本骨架

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <h1>{{msg}}</h1>
  10.     </div>
  11.     <!--1.引用包-->
  12.     <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
  13.  
  14.     <script type="text/javascript">
  15.         //2.创建实例化对象
  16.         new Vue({
  17.             el:'#app',
  18.             data:{
  19.                 msg:'hello vue'
  20.             },
  21.             template:'<div>{{msg}}</div>'
  22.         })
  23.     </script>
  24. </body>
  25. </html>

注意：如果实例中有template加载template中的内容，没有的时候再加载#app模板中的内容

2、插值表达式{{ }}

{{表达式}}中可以包含如下几个类型

-对象：注意{{ {} }}第二个括号后面有空格

  1. <div>{{ {name:"jack"} }}</div>

-字符串

  1. <div>{{'hello'}}</div>

　　-布尔值：{{true}}可以是判断后的

  1. <div>{{isTrue}}</div>

　　-三元表达式

  1. {{1>2? '真的':'假的'}}

　　-加减乘除

  1. <div>{{1*9}}</div>

　　-api操作

  1. <div>{{msg.split(' ').reverse().join('')}}</div>

3、vue起的作用，在开发中充当的角色MVC

声明式开发：按照语法做一些声明的定义，不需要了解过程

命令式开发：jquery写法，需要获取dom, 监听， 添加事件和方法。所有的事情都需要自己做。

4、基本指令

　　（1）v-text:  添加的是innerText

　　（2）v-html: 加的是innerHtml

  1.  <p v-text="msg"></p>
  2.         <p v-text="1+1"></p>
  3.         <p v-text="msg2"></p>
  4.         <p v-html="msg2"></p>
  5.  
  6. new Vue({
  7.             el:'#app',
  8.             data:{
  9.                 msg:'hello1 vue',
  10.                 isTrue:1==1,
  11.                 msg2:'<h1>指令</h2>'
  12.             },
  13.             template:''
  14.         })

　　（3）v-if 数据属性对应的值，如果为假 则不渲染，为真渲染（这个通过添加和销毁元素）

　　（4）v-show: 控制dom元素的显示隐藏 display:none|block

　　注意：v-if是“真正”的条件渲染，因为它会确保在切换过程中条件的事件监听和子组件适当地被销毁和重建

　　　　　v-if的初始条件如果一开始为假，则页面不会渲染，直到遇到条件为真时，才开始渲染

v-show:不管初始条件是什么都会渲染，只是切换css中display

v-if:就会有更高的切换开销，

比如登录保存适合v-if,  页面的tab切换适合用v-show

  1. <p v-if="true">{{msg}}</p>
  2. <p v-show="false">{{msg}}</p>

　　（5）v-bind:绑定属性，可以绑定任何标签属性，也可以绑定自定义属性，缩写：“：”

　　

  1. <div class="box" v-bind:class="{active:true}"></div>
  2. <div class="box" v-bind:aa="text"></div>
  3.  
  4.  new Vue({
  5.             el:'#app',
  6.             data:{
  7.                 msg:'hello1 vue',
  8.                 isTrue:1==1,
  9.                 msg2:'<h1>指令</h2>',
  10.                 isGreen:false,
  11.                 text:'你好'
  12.             },
  13.             template:''
  14.         })

　　（6）v-on:绑定事件，缩写：“@”

  1.  <button v-on:click="show()">按钮</button>
  2.  new Vue({
  3.             el:'#app',
  4.             data:{
  5.  
  6.                 text:'你好'
  7.             },
  8.             template:'',
  9.  
  10.             methods:{
  11.                  show(){
  12.                      console.log(this.text);
  13.                  }
  14.             }
  15.         })

　　（7）v-for遍历：可以遍历对象，也可以遍历数组

遍历数组：

<ul>
  <li v-for="(item, index) in list">
    <h1>{{item.id}}</h1>
    <p>{{item.name}}</p>
  </li>

</ul>

  1. new Vue({
  2.             el:'#app',
  3.             data:{
  4.                list:[
  5.                 {id:1, name:'vue'},
  6.                 {id:2, name:'javascript'},
  7.                 {id:3, name:'node'}
  8.  
  9.                 ]
  10.             },
  11.             template:'',
  12.  
  13.             methods:{
  14.                  show(){
  15.                      console.log(this.text);
  16.                  }
  17.             }
  18.         })

　　遍历对象：

  1. <ul>
  2.             <li v-for="(value, key) in objlist">
  3.                 {{key}}==={{value}}
  4.             </li>
  5.  
  6. </ul>
  7.  
  8.   new Vue({
  9.             el:'#app',
  10.             data:{
  11.                list:[
  12.                 {id:1, name:'vue'},
  13.                 {id:2, name:'javascript'},
  14.                 {id:3, name:'node'}
  15.  
  16.                 ],
  17.                 objlist:{
  18.                     id:1,
  19.                     name:"小绿"
  20.                 }
  21.             },
  22.             template:'',
  23. }）

　　 注意：还可以进行条件遍历：需要在computed中过滤

  1. //filterAddress 是有computed重新过滤的数组
  2. <li v-for="(item,index) of filterAddress" >
  3.                 <dl>
  4.                   <dt>{{item.userName}}</dt>
  5.                   <dd class="address">{{item.streetName}}</dd>
  6.                   <dd class="tel">{{item.tel}}</dd>
  7.                 </dl>
  8. </li>
  9.  
  10. //vue（{}）中定义
  11. computed函数过滤
  12.  
  13.     computed:{
  14.        filterAddress: function(){
  15.         //只返回数组从0-3的数据
  16.            return this.addresslist.slice(0,3);
  17.        }
  18.     },

　　（8）v-model:数据的双向绑定：一般用于表单上

  1.     <div id="app">
  2.         <input type="text" name="" v-model='msg'>
  3.         <h3>{{msg}}</h3>
  4.     </div>    
  5.  
  6. //2.创建实例化对象
  7.         new Vue({
  8.             el:'#app',
  9.             data:{
  10.               msg:'hello vue'
  11.             },
  12.             template:'',
  13.  
  14.         })

双向数据绑定说明

三、总结

vue（基础一）_基本指令的使用的更多相关文章

  1. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  2. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  4. vue 基础重要组件 模板指令 事件绑定

    组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...

  5. Vue(基础八)_导航守卫（组件内的守卫）

    一.前言 主要通过一个例子演示三个钩子的作用: 1.beforeRouteEnter()                                                         ...

  6. Vue(基础六)_嵌套路由（续）

    一.前言                  1.路由嵌套里面的公共路由                  2.keep-alive路由缓存                  3.导航守卫 二.主要内容 ...

  7. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  8. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

  9. vue(基础二)_组件，过滤器，具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

  10. redis基础一_常用指令

    # Redis configuration file example. # # Note that in order to read the configuration file, Redis mus ...

随机推荐

  1. Sharepoint 2016 - Deploy Office Online Server

    Step 1: Install prerequisite software for Office Online Server   To install Office Online Server Ope ...

  2. 【数学建模】day08-数理统计III

    2. 回归分析 回归分析与曲线拟合区分. 曲线拟合是,根据得到的若干有关变量的一组数据,寻找因变量与(一个或几个)自变量之间的一个函数,使这个函数对那组数据拟合得好.通常,函数的形式可以由经验.先验知 ...

  3. centos6 nginx 安装【转】

    原文 https://www.cnblogs.com/yaoximing/p/6068622.html 1.下载nginx 方法一 wget http://nginx.org/download/ngi ...

  4. zabbix在执行docker命令是报错

    系统环境 ubuntu 14.04  x64 安装了zabbix,去监控docker的状态,安装zabbix见我的另外一篇文章 错误如下 WARNING: Error loading config f ...

  5. B - I Hate It HDU - 1754 线段树区间最大值板子（单点更新，区间最大）

    第一次打 改了半天  各种小错误 难受 #include<cstdio> #include<iostream> using namespace std; +; int a[ma ...

  6. 安卓Android基础第三天——数据库,ListView

    数据库介绍sqlite问:什么情况下使用数据库?答:有大量相似结构的数据需要存储的时候 数据库的创建定义一个类继承SqliteOpenHelpercontext:上下文name:数据库名字,如&quo ...

  7. PhoneGap & Cordova 安装白皮书

    1.前题: PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用 iPhone,Android,Palm,Symbian, ...

  8. MT【253】仿射和蒙日圆

    如图,设点$M(x_0,y_0)$是椭圆$C:\dfrac{x^2}{2}+y^2=1$上一点,从原点$O$向圆$M:(x-x_0)^2+(y-y_0)^2=\dfrac{2}{3}$作两条切线分别与 ...

  9. flowable6.4.1+springboot使用dmn

    resources/dmn/strings_1.dmn <?xml version="1.0" encoding="UTF-8"?> <def ...

  10. Hdoj 1087.Super Jumping! Jumping! Jumping!

    Problem Description Nowadays, a kind of chess game called "Super Jumping! Jumping! Jumping!&quo ...