2 Vue常用指令

2.1 vue用法

    
             {
    {name}}    // 模板语法
    

2.2 v-html;v-text

# v-text
    
    
     
   #### v-text="name"
    

# v-text和v-html
    
    
     
         #### v-text    
     
    #### v-html
    

2.3 v-for

    
    
     
      {
    {items}}
     
  ### 重点    
     
      {
    {items.name}}的价格是{
    {items.price}}
     
 ### 重点
    

2.4 v-if,v-else-if,v-else

    
    
     
              学生登录系统    
     
    
     
              老师登录系统    
     
    
     
        
      
请使用正确的身份
    
     
    
# 浏览器console控制台。切换app.role='teacher'来实现v-else-if和v-else的实现// 在html里只显示页面显示标签（说明添加的是appendChild）

2.5 v-show

    
    
     
Vue中v-show指令
    
// 页面标签显示是  display 来显示

2.6 v-bind 简写 ：

2.6.1 绑定a标签

我们之前的写法

    
    
     去百度
    

vue中v-bind指令

    
    
     去百度 ☆☆☆☆☆☆
    

2.6.2 绑定样式

之前的写法

 
    
    
     去百度
    

vue中v-bind指令

    
    
     去百度    ### v-bind简写是‘:’，绑定样式{}
    

2.7 v-on 简写 @

// 两者选一个
    
    
     点我给你想要的
    
==================================================
    
    
     点我给你想要的
    
==================================================

2.8 小demo-给Alex加点料

壹：

    
    
     
                    # 绑定样式        
      
    
     
    
     点我改变颜色
    

贰：

    
    
     点我显示    
     
晓强
    

2.9 v-model 双向绑定

    
    
     
请输入你的姓名
    
         {
    {name}}    
     
    
     
请选择你的性别
    
         
         {
    {sex}}    
     
    
     
单选
    
             林俊杰0        林俊杰1        林俊杰2        {
    {boy_friend}}    
     
    
     
多选
    
             林志玲0        林志玲1        林志玲2        {
    {girl_friend}}    
     
    
     
textarea
    
             {
    {my_textarea}}
    

2.10 指令修饰符

2.10.1 懒惰lazy/去空格（trim）

2.10.2 number显示数据类型

2.10.3 pre标签显示多个空格

    
    
     
lazy回车之后显示
    
         
         # 去空格    {
    {name}}    
     
    
     
number显示数据类型
    
         {
    {typeof phone}}    
     
     
     
pre标签显示多个空格
    
         
     
{
    {pre}}
    

2.11 计算指令 computed

# 效果是字符串拼接
    
    
     
              
               
                    
学科
                    
成绩
               
              
              
               
                    
python基础
                    
               
               
                    
前端
                    
               
               
                    
django
                    
               
               
                    
总分
                    
{
    {python + web +django}}
               
               
                    
平均分
                    
{
    {(python + web + django)/3}}
               
              
         
    

            python基础                    

    
    
     
              
               
                    
学科
                    
成绩
               
              
              
               
                    
python基础
                    
               
               
                    
前端
                    
               
               
                    
django
                    
               
               
                    
总分
                    
{
    {python + web +django}}
               
               
                    
平均分
                    
{
    {(python + web + django)/3}}
               
              
         
    

• 在继续改，我们在总分和平均分的时候算的太麻烦了，怎么办呢，引出computed

# computed版本------对比没有注释掉的部分
    
    
     
              
                                                                                  
              
                                                                                                                                                                                                                           
                    
总分
                    
{
    {sum_num}}
               
               
                    
平均分
                    
{
    {(python + web + django)/3}}
               
              
         
    

2.12 自定义指令 directive

• 模板

Vue.directive('mingzi',function (el,bindding) {});

• 步骤

① 搭建vue② 新建自定义指令③ 绑定个盒子④ 操作

① 搭建vue

② 新建自定义指令

    
    
    
        Vue.directive('boxs',function (el,bindding) { });    
            
        
    
    
    

③ 绑定个盒子,加个样式和数据

    
        
    
    
        
            
        
        
            
            data:{            text:true        }    })////

• Vue.directive里打印

Vue.directive('boxs',function (el,bindding) {        console.log(el);           // 绑定指定的元素（div）        console.log(bindding)      // 自定义指令的对象（.value是一个值）    });

④ 操作--盒子位置变化的demo

• 看下图，我们所写的都会显示那么我们研究一下标红的地方--modifiers

• 我们怎么改呢

    
    
     
 ☆☆☆☆☆
    

• 盒子变换位置

2.13 获取DOM操作

    
    
     
          ☆☆☆☆☆ref        
      
获取DOM
    
     
    
     点我给盒子改变样式