天道酬勤,学无止境

VUE学习03--VUE数据绑定(绑定数据,绑定属性,绑定样式,双向数据绑定)

今天我们一起来学一学 VUE的绑定。

一、数据绑定

首先可以先把数据定义在Vue页面中的<script>标签内,然后在<template>标签中通过{{变量名去取}}。

另一种方法:<div v-text="变量名"></div>

如果变量是对象,可以{{对象.属性}}去取。

如果变量是集合,可以通过 v-for 遍历去取。

请看下面实例(我们在新建项目中的App.vue):

<template>
  <div id="app">
 <h2>hello vue 绑定数据: {{msg}}</h2>
    <br>
    绑定数据的另一种方法:
    <div v-text="msg"></div>    
    <br>
    <h3>{{obj.name}}</h3>
    <br>
    <hr>
    
<ul><li v-for ="item in list" >
{{item}}
</li></ul>
<br>
<ul><li v-for ="item in list1" >
{{item.title}}
</li></ul>
<ul><li v-for ="item in list2" >
{{item.cate}}
  <ol>
  <li v-for ="news in item.list" >
  {{news.title}}
  </li>
  </ol>
</li></ul>
<br>

  </div>
</template>

<script>
export default {
  name: 'App',
   data () { /*业务逻辑里面定义的数据*/
    return {  
  msg: 'Welcome to Your Vue.js App',
      obj:{name:"张三"},
      flag:false,
      list:['111','222','333'],
      list1:[
        {'title':'1111'},{'title':'2222'},{'title':'2222'}
      ],
      list2:[
        {
          "cate":"国内新闻",
          "list":[
            {'title':'国内新闻1111'},
            {'title':'国内新闻2222'}
          ]
        },
        {
          "cate":"国际新闻",
          "list":[
            {'title':'国际新闻1111'},
            {'title':'国际新闻2222'}
          ]
        }
      ]

}
}
}
</script>

<style>

</style>

二、属性绑定

绑定属性主要使用 v-bind命令。 如:<img v-bind:src="url">

也可以使用省略写法 :  如:  <img :src="url">

具体示例代码如下:

<template>
  <div id="app">
<h1>绑定属性</h1>
<div v-bind:title="title">aaaa</div>
<img v-bind:src="url">
<br>
另一种写法
<img :src="url">
<br>
绑定html
<div v-html="h"></div>


  </div>
</template>

<script>
export default {
  name: 'App',
   data () { /*业务逻辑里面定义的数据*/
    return {  
      url:"https://cn.vuejs.org/images/vuemastery.png?_sw-precache=6f09ce143467fba22039bde3f2070c19" ,
      title:"我是一个标题",
      h:'<h2>我是h2</h2>'
}
}
}
</script>

<style>

</style>

样式绑定:

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷、高效;但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用,可以查找代码中bug。内联样式的优先级比选择器优先级要高,且不能重用,请谨慎使用~

<template>
  <div id="app">
    <!--类选择器样式绑定-->
    <div v-bind:class="{active:isActive}"></div>
    <br>
    <!--内联样式绑定-->
    <div v-bind:style="{ width : wid +'px' , height : hei + 'px', background : color }"></div>
  
  </div>
</template>

<script>
export default {
  data(){
    return {
      isActive: true,
      wid:100,
      hei:100,
      color:"red",
      actactiveColor:'red',
      fontSize:100
    }
  }
}
</script>

<style lang="scss">
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
  </style>

四、双向数据绑定

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

下面是一个简单的示例,大家可以尝试一下,就会明白其中含义。

<template>
  <div id="app">
    <input  v-model="message">
    <br>
    <br>
    下面是复读机,通过input框的输入影响了message的值,message的值改变又显示在下方,这就是双向绑定
    <div v-bind:class="{active:flag}">{{message}}</div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      message:"",
      flag:true
    }
  }
}
</script>

<style lang="scss">
  .active {
    width: 145px;
    height: 20px;
    background: grey;
  }
  </style>

 

喜欢的朋友欢迎点赞,评论,关注哦~~

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Vue 入门学习视频教程
    网盘视频链接:https://pan.baidu.com/s/1NjJkC_Zvx_ugvixSN_R2Kg视频课程内容:01 Vue的介绍 02 Vue环境搭建 运行项目 03 Vue目录结构分析 绑定数据 绑定对象 循环数组渲染数据 04 Vue绑定属性 绑定Html 绑定class 绑定style 05 Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 06 Vue事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象 07 Vue 事件结合双向数据绑定实现todolist 08 Vue 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中 09 Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化 10 Vue中创建单文件组件 注册组件 以及组件的使用 11 Vue中组件的生命周期函数 12 Vue vue-resource 请求数据 13 Axios fetchJsonp请求数据 14 Vue父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件 15 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法 16 Vue非父子组件传值 17 Vue中的路由 以及默认路由跳转 18 Vue动态路由 Get传值 19
  • Vue.js系列(四):Vue基础指令及数据绑定!
    Vue.js系列(四):Vue基础指令及数据绑定! 前言 注意本次用cdn形式引入js学习,有node.js的玩家可以用node.js。CDN下载地址:https://vuejs.org/js/vue.min.js以及Node.js:Vue系列: windows下npm安装vue 今天博主将为大家分享Vue.js系列(四):Vue基础指令及数据绑定!不喜勿喷,如有异议欢迎讨论! 有一个强大的地基才能写出健壮的程序!请先阅读博主关于:Windows10用npm安装Vue! 目标 学习如何使用Vue 学习Vue插值,表达式绑定数据和v-指令 学习基础指令v-show和v-text 学习数据绑定指令v-model及指令修饰符.number,.trim,.lazy 学习条件判断指令v-if,v-else,v-else-if的使用 学习循环指令v-for的使用 学习动态绑定指令v-bind 使用v-bind动态绑定class和style属性 1.1.1学习如何使用Vue 在html标签body结束标记之前使用script标签引入vue.js文件 <body> ...html代码 <!-- 引入vue.js --> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script> </body>
  • Vue初步入门学习
    Vue.js初步入门学习 简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 Vue入门初体验 01-hello Vue.js Vue主要通过Vue对象的元素el对DIY元素进行实时绑定。 hello Vue.js 示例代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--通过el:#app进行id挂载,--> <div id="app"> <!--通过{{variable}}进行展示--> <h2>{{message}}</h2> <h2>{{msg1}}</h2> </div> <script src="../js/vue.js"></script> <script> //let(定义变量)/const(定义常量) //编程范式:申明式编程 const app = new Vue({ el:"#app",//用于挂载要管理的元素 data
  • vue进阶03-vue语法学习实战
    文章目录 1.vue语法2.vue案例2.1 查询数据2.2语法解释2.2.1 循环2.2.2 if条件2.2.3 样式2.2.3.1 样式表2.2.3.2 内嵌样式 2.2.4 事件2.2.5 ajax2.2.6 vue内置属性2.2.6.1 属性2.2.6.2 \$refs属性2.2.6.3 \$attrs和\$props属性2.2.6.4 \$route和\$router属性2.2.6.5 vm.\$parent和vm.\$root和vm.\$children2.2.6.6 $store2.2.6.x 其他$属性 1.vue语法 这里使用一个增删改查的案例来讲vue常用的语法罗列 常用语法: 条件循环 参考样式绑定 参考表单双向绑定 参考$refs定位dom 参考ajax请求(axios) 参考事件处理 参考 其他语法学习参考网站 vuejs官网菜鸟教程vuejs api 2.vue案例 实现一个简单基于内存的CUD,读取从web服务器读取。 2.1 查询数据 这里直接使用axios来操作远程接口 导出数据格式为: curl http://192.168.1.35/xxx/tpauth/supportType { "success":true, "code":"200", "message":"成功", "time":1572580292756, "data":[ {"id"
  • 不变的就是变化本身(Vue学习笔记one)
    奋斗是这么个过程,当时不觉累,事后不会悔。走一段再回头,会发现一个更强的自己,宛如新生。你好,我是梦阳辰!期待与你相遇!文章较长,切勿心急气躁,否则将一事无成!学习Vue前,我们需要先了解一些MVVM,因为它很重要。虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。01.MVVM1.什么是MVVM?MVVM (Model-View-ViewModel)是一种软件架构设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight(类似于Java Applet,简单点说就是在浏览器上运行的 WPF)的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。由John Gossman(同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。MVVM源自于经典的MVC ( Model-View-Controller)模式。MVVM的核心是ViewModeA层,负责转换 Model中的数据对象来让数据变得更容易管理和使用,其作用如下:该层向上与视图层进行双向数据绑定 向下与 Model层通过接口请求进行数据交互MVVM已经相当成熟了,主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js , Angulars等。02
  • VUE常用语法
    VUE绑定总结: {{}}去data里面的属性值和函数返回值v-bind简写:bind用来绑定style和classv-on简写@on用来绑定事件v-model用来双向绑定如input selected等标签 1-{{ }} 用于输出对象属性和函数返回值。 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: “1234567", url: “www.baidu.com", }, methods: { details: function() { return this.site; } } }) </script> 2-v-text和v-html 使用v-text和v-html指令来替代{{}},属于单项绑定 说明: v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出 v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染 示例: HTML: <div id="app"> v-text:<span v-text="hello"><
  • 前端成神之路-vue01
    Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 使用Vue将helloworld 渲染到页面上 指令 本质就是自定义属性Vue中指定都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style> <body> <div id="app"> <!-- 2、 让带有插值 语法的 添加 v-cloak 属性 在 数据渲染完场之后,v-cloak 属性会被自动去除, v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签 也就是对应的标签会变为可见 --> <div v-cloak >{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', // data
  • v-model指令,mvvm,v-on指令,事件修饰符,``按键修饰符,v-bind指令绑定(对象,数组,style属性...)
    v-model指令,mvvm,v-on指令,事件修饰符,``按键修饰符,v-bind指令绑定(对象,数组,style属性...) 1. v-model指令(表单元素value的绑定指令,双向数据绑定) 当数据发生变化的时候,视图会发生变化; 当视图发生变化的时候,数据也会跟着同步变化; v-model指令 限制在 <input> <select> <textarea> components组件中使用 <div id="app"> <div>{{msg}}</div> <div> 当输入框中内容改变的时候, 页面上的msg 会自动更新 <input type="text" v-model='msg'> </div> </div> 双向数据绑定原理: vue双向数据绑定原理主要通过数据劫持Object.defineProperty和发布订阅模式实现的,通过Object.defineProperty监听数据发生变化然后通知订阅者(watcher),订阅者触发响应订阅; 2.mvvm mvvm把前端的视图层,分为三部分Model,View, VM:ViewModel m:model 数据层Vue中数据层都放在data里面; v:view 视图 Vue中view就是html页面; vm:view-model 控制器 将数据和视图层建立联系 vm就是Vue实例 通常用vm; 2.1
  • vue学习记录:事件修饰符、v-model、Class 与 Style 绑定
    一、vue.js事件修饰符 .stop 阻止冒泡.prevent 阻止默认行为.self 实现只有点击当前元素时候,才会触发事件处理函数.capture 实现捕获触发事件的机制.once 只触发一次事件处理函数 <div id="app"> <!-- 使用 .stop 阻止冒泡 --> <div class="inner" @click="div1_out"> <input type="button" value="stop" @click.stop="stop_thing"> <!-- 使用 .prevent 阻止默认行为 --> <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 --> <input type="button" value="self" @click.self="self_thing"> <!-- 使用 .capture 实现捕获触发事件的机制 --> <input type="button" value="capture" @click.capture="capture_thing"> <!-- 使用 .once 只触发一次事件处理函数 --> <a href="http://www.baidu
  • Vue指令(超详细)
    准备开始 本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性。本章合适人群囊括了除已有开发经验人员以外的小白新手,从how、why、what三个角度来让大家理解并使用该技术… 历史介绍(数据源自2017年github) angular 09年,年份较早,一开始大家是拒绝 star:33.4kreact 2013年, 用户体验好,直接拉到一堆粉丝 star:89kvue 2014年, 用户体验好 star:84.6k 前端框架与库的区别? jquery 库 -> DOM(操作DOM) + 请求art-template 库 -> 模板引擎框架 = 全方位功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 KFC的世界里,库就是一个小套餐, 框架就是全家桶代码上的不同 一般使用库的代码,是调用某个函数,我们自己把控库的代码一般使用框架,其框架在帮我们运行我们编写好的代码 框架: 初始化自身的一些行为 执行你所编写的代码施放一些资源 vue起步 1:引包 2:启动 new Vue({el:目的地,template:模板内容}); options 目的地 el内容 template数据 data vue的文件介绍 目录介绍 插值表达式 {{ 表达式 }} 对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{
  • 第 1 篇:Vue.js 很高兴认识你
    作者:HelloGitHub——追梦人物Hello Vue既然是学习编程,那就遵循一下那个古老的传统仪式。首先我们新建一个 todos.html 文件,用任何一个你喜欢的文本编辑器或者 IDE 打开(例如 vscode、sublime、记事本、notepad++、webstorm 等等),然后写上下面的代码:Vue Todo Tutorial{{ message }}我们写了一个简单的 HTML 文件,使用 Script 标签引入了 Vue,版本是 2.5.16。然后我们写了几行 js 代码。在代码中我们 new(创建) 了一个 Vue 对象,并向这个对象传递了一些选项,例如告诉 Vue 挂载的元素(el,即elements 的缩写)是 id 为 app 的那个 div,并且在 data 中绑定了一个名为 message 的变量,其值为 'Hello Vue!',然后我们就可以在 HTML 文档中引用这个 message 。Vue 在后面帮我们做么很多神奇的事情,它把 {{ message }} 替换成了 Vue 对象中对应的值。保存代码并用浏览器打开,可以看到浏览器显示了 “Hello Vue!”,你也可以尝试修改 message 的值,发现显示的内容会跟着变化。表单绑定再来看一个神奇的例子,我们把代码换成下面这样:Vue Todo Tutorialvalue 的值是:{{
  • vue中的指令
    vue中的指令 插值表达式 vue中如果需要在html标签的“内容区域”中表现数据,就可以使用**{{}}双花括号**,这个技术称为插值表达式 语法: <标签> {{ 表达式 }} </标签> 表达式:变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等 使用示例: <body> <div id="app"> <p>{{ city }}</p> <p>{{ people }}</p> <!--变量--> <p>{{ 300 }}</p> <!--常量--> <p>{{ people+400 }}</p> <!--算术--> <p>{{ people>1000 }}</p> <!--比较--> <p>{{ people>1000 && city==='北京' }}</p> <!--逻辑--> <p>{{ people>1000 ? '超级城市' : '大城市' }}</p> <!--三元运算--> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ // delimiters:['${','}$'], el: '#app', data: { city: '北京', people: 2000 } }) </script> </body> 效果展示: 如果{{}}使用中有冲突,想更换为其他标记
  • Vue05_v-model进一步学习(双向数据绑定在checkbox中的运用)
    1. v-model在input中的实例 当使用如上代码时,样式如下: 输入框内并没有显示“请输入地名地址”字样,其原因是: v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定: v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示,仅会在初始化渲染时短暂显示。 当我们要实现这个效果时,需要用到 placeholder :placeholder 这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)。 PS:优先级 v-model > value > placeholder,当v-model与value都为空字符串时,placeholder才生效 见代码: <body> <div id="app"> <input type="text" v-model="msg" placeholder="请输入"> {{ msg }} </div> <script> var app = new Vue({ el: "#app", data: { msg: "",//双向数据绑定
  • vue框架的学习-基础部分
    1:vue的安装 使用一个框架,我们第一步要做什么呢?安装下载它 安装Vue的方式有很多: 方式一:直接CDN引入 你可以选择引入开发环境版本还是生产环境版本 <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 方式二:下载和引入 开发环境 https://vuejs.org/js/vue.js 生产环境 https://vuejs.org/js/vue.min.js 方式三:NPM安装 通过webpack和CLI的安装使用 我的公司开发时使用webpack安装了vue即方式三 注:本文是本人vue学习笔记,本文多数内容属于Vue2.6之前的内容,只有较为重要的地方才会补充2.6版本之后的内容,望周知。 2:Vue中的MVVM 个人理解: v-view就是页面 m-model就是数据 vm-viewModel是Vue DOM Listeners就像计数那个例子一样,事件发生了他会监听到反应到页面上 Data Bindings 数据绑定,就是data里的数据
  • Vue 报错(样式绑定) [Vue warn]: Property or method "sty" is not defined on the instance but referenced
    分享下我遇到的错误,也是记录下,我遇到的问题; vue 绑定 class 与style 遇到的问题 我的代码时这样的, 把vue实例中sty 注释掉了, 这里就发生了这样的报错, 我的原意是想测试下.在style标签写的是否生效: 所以有两种思路, 一是 把 class 其前面的 : 给删了,自然不会报错, 二 是 把 绑定的class 在进行补全; :class="{sty:true/false}" 这样均可以实现 , 在style中定义的样式的生效 三元表达式的使用: (在三元运算符中 使用的 [ ...] 来进行表达式的使用 ) 这里使用 :style来进行三元表达式的时候,需要使用的是 [ ..] 基本形式 : style="[true ? sty : font]" 使用 { } ,会报编译错误 注意:数组中的classify如果不加引号的话,代表的是data中的一项,并不是类名,将classify加上双引号,变成字符串就可以变成类名 使用class 来进行绑定的时: :class="[true ? 'sty' : 'font']" 此时,必须加上引号,不然相当于直接变量进行赋值,而data中没有这个数据,就会报错 :class='[[条件1 ?'class1' : 'class2'],{'class3' : 条件2},'class4',...]' 总结 class属性绑定
  • VUE框架:基础知识及核心原理
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架特点:易用、灵活、高效全家桶:vue + components(vue element / iview...) + vue-router + vuex + vue-cli类库 vs 插件 vs 组件 vs 框架类库:jquery、zepto、underscore...插件:dialog、banner、drag、tab、iscroll...组件:bootstrap、swiper...框架:backbone、angular、vue、react、uni-app、react native、flutter...声明式和命令式命令式编程:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命令实现,例如for循环声明式编程:告诉“机器”你想要的是什么(what),让机器想出如何去做(how),例如数组内置方法forEach等MVC & MVVM传统操作DOM模式MVC:model view controllerMVVM:model view viewModel<div id="app"> {{msg}} </div> <!-- IMPORT JS --> <script src="node_modules/vue/dist/vue.min.js"></script>
  • Day7:Vue入门学习——传智播客学习笔记【微服务电商】
    本节依旧是前端内容,但还是了解一下基础的入门知识 学习目标 会创建Vue实例,知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 0. 前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面,我们肯定无从下手,因此今天我们就要来了解一下前端的一些技术,完成前端页面搭建。 先聊一下前端开发模式的发展。 静态页面 最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新,操作DOM 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 随着JavaScript的诞生,我们可以操作页面的DOM元素及样式,页面有了一些动态的效果,但是依然是以静态为主。 ajax盛行: 2005年开始,ajax逐渐被前端开发人员所重视,因为不用刷新页面就可以更新页面的数据和渲染效果。 此时的开发人员不仅仅要编写HTML样式,还要懂ajax与后端交互,然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。 MVVM,关注模型和视图 2008年,google的Chrome发布
  • Vue——基础语法篇
    Vue——基础语法篇 author:木子六日 学习视频来源 coderwhy老师的vue教学 文章目录 Vue——基础语法篇author:木子六日学习视频来源01.hello vue02.vue展示列表03.vue计数器案例04.v-once的使用05.v-html的使用06.v-text的使用07.v-pre的使用08.v-bind的使用09.小练习10.computed计算属性11.v-on的修饰符12.v-if的使用13.filter、map和reduce三大函数介绍14.v-model的使用 01.hello vue <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello vue!</title> <script src="js/vue.js"></script> </head> <body> <div id="div01"> <h2>{{message}}</h2> </div> <div> {{message}} </div> </body> <script type="text/javascript"> //let定义变量 const定义常量,尽量不要用var定义 //另外要注意这个script要写在div后面嗷,不然就找不到了 let app = new Vue({ el:'#div01'
  • Vue的学习
    一、邂逅Vue <一>Vue的安装 直接CND下载下载和引入NPM安装CLI和NPM的结合使用 <二>Vue的MVVM架构 data和Vue对象的分离Vue中的MVVM 二、Vue的基础语法 <一>插值语法 Mustachev-once v-once 的数据不会被二次修改 <div id="app"> <!-- 语法:<div v-once>{{数据}} </div> 此数据只会在第一次的时候被修改, 此后在console的修改都不会生效 --> <div v-once>hello, {{massage}} </div> </div> <!-- 此部分之后不会贴出代码 --> <script src="../js/vue.js"></script> <script> const data = { massage: "小明~" } const app = new Vue({ el: '#app', //用于要挂在的元素 //data中的元素是使用 this. data: data //定义数据 }) </script> v-html v-html 显示html数据 <!-- 语法:v-html='数据名称' 适用于:数据中含有html代码,需要用html形式输出 --> <div v-html='url'></div> const data = { url: '<a href=
  • vue指令整理(+自定义)+生命周期+组件
    指令 指令1:数据引用 {{}} 和 v-text 和 v-html 同:“读出数据” 异:“{{}}直接显示文本内容、v-text直接显示文本内容、v-html读取内容时可解析标签” 指令2:显示隐藏控制 v-show与v-if v-else 参考:https://editor.csdn.net/md/?articleId=103960120 同:“ 判断显示,控制显示与隐藏” 异:“(1)v-if控制的是dom的移除和添加,v-show控制的是dom的样式显示与隐藏(display) 。频繁的切换显示与隐藏用v-show 只判断一次时,用v-if。 (2)v-if可以与template连用,但是v-show不行。” v-show:示例: v-if示例: 指令3:循环遍历 v-for 学习链接;https://cn.vuejs.org/v2/guide/list.html 指令4:鼠标事件 v-on: ==@ 学习链接:https://cn.vuejs.org/v2/guide/events.html#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6 鼠标点击事件。v-on:click等价于@click 等价于: 指令5:属性值绑定 v-bind: ==: 绑定一个属性值。示例:a标签的href属性值,打开连接 等价于: #指令6:数据双向绑定 v