vue基础整理1-指令&模板

vue核心:响应式的数据绑定、组合的视图组件

指令:

一种特殊的自定义行间属性。当其表达式的值改变时相应地将某些行为应用到dom上,如绑定事件处理函数。

v-model  实现双向数据绑定  eg.首先显示屏上的内容会反应在输入框中,当输入框中输入其他内容可以改变显示屏上的内容

 <div id="demo">                                     <!--模板-->
       <input type="text" v-model="message" />       <!--v-model实现双向数据绑定-->
       <p>{{message}}</p>                            <!--数据渲染-->
   </div>
   <script>
       let data={
           message:"hello vue"                       //这里的数据用于呈现在页面中的数据
       }
       var vm=new Vue({                             //vm实例,通过vue声明一个参数,该参数为一个对象
          el:"#demo",                               //html的挂载元素,里面直接写上选择器即可,一般用id,也可以用class的类名
           data:data                               //上面定义的数据.data是一个对象,将数据绑定在模板里
       });
  </script>

v-on 实现事件绑定  eg.为<span>标签绑定点击事件,在下面的vm实例的methods中定义需要绑定的事件

//es6  <!--模板-->
  <div id="demo">
      <span v-on:click="clickHandle()">{{message}}</span> <!--v-on指令可以实现绑定事件-->
  </div>
  <script>
      let obj={
          message:"hello",                            //这里的数据是用于呈现在页面中的数据
      }
      var vm=new Vue({                              //vue实例,通过vue声明一个参数,该参数为一个对象
          el:"#demo",                              //html的挂载元素,里面直接写上选择器即可
          data:obj,                               //将上面定义的数据绑定在模板中
          methods:{ clickHandle(){               //用于绑定的事件统一写在实例的methods中
            alert("clicked");
        }
       }
      });
  </script>

//es5
 <div id="demo">    <span v-on:click="clickHandle()">{{message}}</span></div><script>    var obj={        message:"hello"    }    new Vue({       el:"#demo",        data:obj,        methods:{            clickHandle:function(){                alert("clicked");            }        }    });</script>

 

v-bind  动态的绑定数据,简写为 :

<div id="demo" v-bind:custom="abc">                <!--可以通过v-bind绑定自定义属性-->
    <div v-html="html"></div>                      <!--v-html指令将文本解析成html-->
</div>
<script>
    let obj={         //数据
        html:"<div>hello,miaov</div>",
        abc:1
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

  

v-text  更新数据,会覆盖已有结构

v-show 根据值的真假,切换元素的display属性

v-else-if 多条件判断,为真则渲染

v-for 基于源数据多次渲染元素或模板块

v-pre 跳过元素和子元素的编译过程

v-html 可以解析数据中的html结构

<div id="demo">
    <span v-html="html"></span>      <!--渲染后显示在页面中为:hello-->
</div>
<script>

    let obj={     //数据
        html:"<div>hello</div>"
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

v-if 根据值的真假,切换元素会被销毁,重建

v-else 条件都不符合渲染

v-once 只渲染一次,随后数据更新不重新渲染

渲染:

声明式渲染-只需要声明在哪里做什么,而无须关心如何实现  &   命令式渲染-需要以具体的代码表达在哪里做什么,怎么实现

 var arr=[1,2,3,4,5] //求数组中每一项的倍数,然后放入另一个数组中

  /* //命令式地渲染
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]*2);
    }
    */

    //声明式渲染
    var newArr=arr.map(function(item){
        return item*2 ;
    });
    console.log(newArr);

模版

html模板:基于dom的模板,模板都是可解析的有效的html

插值:

文本--使用双大括号{{value}}  替换实例上的属性值,当值改变时,插值内容处会自动更新

原生的html--双大括号输出的是文本,不会解析html

<div id="demo">
    <span>{{html}}</span>      <!--渲染后显示在页面中为:<div>hello</div>-->
</div>
<script>
    let obj={   //数据
        html:"<div>hello</div>"
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>
!-如果想将文本解析为html,输出hello,需要使用v-html
<div id="demo">
    <span v-html="html"></span>      <!--渲染后显示在页面中为:hello-->
</div>
<script>
    //数据
    let obj={
        html:"<div>hello</div>"
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

属性-使用v-bind进行绑定,可以响应变化

<div id="demo" v-bind:custom="abc"><!--可以通过v-bind绑定自定义属性-->
    <div v-html="html"></div><!--//v-html指令将文本解析成html-->
</div>
<script>
    let obj={         //数据
        html:"<div>hello,miaov</div>",
        abc:1
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

javascript表达式-

<div id="demo">
    {{3+6}}
    {{true ? "yes" : "no"}}
</div>
<script>
    var vm=new Vue({
        el:"#demo",
    });
</script>

字符串模板-template字符串,template选项对象的属性,模板将会替换挂载的元素。挂载元素的内容都将被忽略。(模板和template不能共存)

<div id="demo">
    <span>miaov ketang</span>
</div>
<script>
    let obj={
        html:"<div>hello,miaov</div>",
        abc:1
    };
    var str="<div>hello,{{abc}}</div>"
//根节点只能有一个,即不能有并列的元素标签,但可以有包含的元素标签
    var vm=new Vue({
        el:"#demo",
        data:obj,
        template:str   /*将新渲染的str替换掉前面的整个div*/
    })
</script>

render模板-

<div id="demo"></div>
 <script>
     let obj={
         html:"<div>hello</div>",
         abc:1
     }
     var vm=new Vue({
         el:"#demo",
         data:obj,
         render:function(createElement){
             return createElement(
                     "ul",
                     [
                             createElement("li",1),
                             createElement("li",2),
                             createElement("li",3)
                     ]
             );
         }
     });
 </script>

  

未完待续。。。。

时间: 2024-10-12 17:52:41

vue基础整理1-指令&模板的相关文章

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定

一.DI-控制器参数 $scope - 在js和html之间传递数据 - 仅在控制器作用域内有效 $element - 是一个jQuery对象 - 作用域控制器所在的html元素 - 在js中,通过$element获取DOM对象 - var e = $element.children().eq(0); - $scope.w = e.width(); - $scope.h = e.height(); $http - http协议请求 - $http.get(url).success(functio

Vue基础进阶 之 自定义指令

自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: inserted: update: componentUpdated: unbind: 自定义指令的使用:在自定指令的名称前加 上 v-: 自定义指令的详细介绍网址:https://cn.vuejs.org/v2/guide/custom-directive.html 下面是关于这个5个钩子函数的示例:

vue基础语法

vue基础语法 vue官网链接:https://cn.vuejs.org/  一.Vue简介 Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. Vue.js是一款轻量级的.以数据驱动构建web界面的前端JS框架,它在架构设计上采用了MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一个Vue的实例,而这个实例又作用域页面上的某个HTML元素. 其核心在于通过数据驱动界面的更新

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

Vue专题-js常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值. 123456789101112131415161718192021222324252627282930 <!DOCTYPE html><ht

Vue 基础篇

Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + ... 代码上的不同: 一般使用库:调用某个函数,自己可以把控库的代码 一般使用框架:其框架在帮我们运行已编写好的代码 框架:初始化自身的一些行为 执行你所编写的代码 施放一些资源 库:小而精 框架:大而全 ( 框架包含了各种库 ) 二.起步 引包 直接用 <scri

Vue基础篇--5列表渲染v-for

Vue基础篇--5列表渲染v-for 1.用v-for把一个数组对弈为一组元素 我们用v-for指令根据一组数组选项列表进行渲染. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="./vue.js"

vue基础2

### Vue.js 基础部分 ## 一. Vue.js 简介 ### 1. Vue.js 是什么 **Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e 版本: v2.0 - 是一个构建用户界面的框架 - 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular.react 类似,其实就是所谓的数据双向绑定 - 数据驱动+组件化的前端开发(核心思想) - 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件*