Vue特点

  渐进式: 渐进, 可以理解成一步一步的. 在使用Vue的时候, 我们不需要把整个Vue框架的东西都用上, 可以一步一步的根据需要慢慢的替换之前的代码。

  自底向上逐层应用: 由底层开始, 把基础的东西先写好, 逐层往上增加新的或者复杂的功能。

  MVVM设计模式: Model(模型)-View(视图)-VM(视图模型), 这是一种基于前端开发的架构模式,其核心是

  提供View和Model的双向数据绑定, 这里的Model状态能直接影响View而View的变化在某些情况下也能影响Model。

  声明式渲染: Vue允许我们用简洁的语法将数据与DOM绑定在一起。

数据绑定

1. 值绑定
  1.1 插值表达式
    {{}}(mustache 大胡子语法),{{}}里面是Vue的编译环境,里面可以填data里的变量,表达式,函数调用。
1 <div id="app">
2 <p>{{message}}</p>
3 <p>{{1<2?true:false}}</p>
4 <p>{{sumFunc(1,2)}}</p>
5 </div>
 1                 let app = new Vue({
2 //el字段,用来挂载dom元素,指定Vue实例的作用域
3 el: '#app',
4 //data字段,指定Vue实例的数据源
5 data: {
6 message: 'Hello Vue!',
7 sumFunc(a, b) {
8 return a + b;
9 }
10 }
11 });

  

  1.2 v-text或者v-html指令
    二者区别:
      当数据里有html字符串时,v-html能直接解析,而v-text和{{}}会原样输出。
    注意:vue指令中的""(双引号)里面也是Vue的编译环境,想直接写字符串的话要用单引号''。
1 <div id="app">
2 <p v-html="msg"></p>
3 <p v-text="msg"></p>
4 <p>{{msg}}</p>
5 </div>
    let app = new Vue({
el: '#app',
data: {
msg: '这是a链接:<a href="http://www.baidu.com">点击跳转至百度首页</a>',
},
});

2.属性绑定
  语法:v-bind:属性名=""
  简写模式(语法糖)::属性名=""
  动态绑定style属性:
    语法::style="数组/对象(常用)/行间样式字符串"
  动态绑定class属性:
    语法::class="数组/对象"
1 .p_style {
2 color: #ffffff;
3 background-color: red;
4 }
 1 <div id="app">
2 <p v-bind:title="msg">v-bind</p>
3 <p :title="msg">v-bind</p>
4
5 <div :style="divStyle1"></div>
6 <div :style="divStyle2"></div>
7 <div :style="divStyle3"></div>
8
9 <p :class="className">这是段落1标签</p>
10 <p :class="{p_style:true}">这是段落2标签</p>
11 <p :class="{p_style:isAddClass}">这是段落3标签</p>
12 </div>
 1 let app = new Vue({
2 el: '#app',
3 data: {
4 msg: '鼠标悬停几秒钟查看此处动态绑定的提示信息!',
5 divStyle1: {width: '500px', height: '15px', background: 'red'},
6 divStyle2: [{width: '500px'}, {height: '15px', background: 'green'}],
7 divStyle3: "width: 500px;height: 15px; background: blue",
8 className: {p_style: true},
9 isAddClass: true,
10 },
11 });

3.事件绑定
  语法:
    v-on:事件名="函数名/函数名()/简单的语句"
  语法糖:
    @事件名="函数名/函数名()/简单的语句"
  注意:
    a. 绑定函数时,函数名后的小括号可加可不加,取决于是否需要传递参数,如果需要传参,必须加小括号。
    b. 绑定函数时,没加小括号,系统默认第一个形参为事件对象。
    c. 绑定函数时,加了小括号,需要通过传入$event获取事件对象。
    d. 事件函数里可以直接同过this.变量名获取data里的数据源变量。
1 <div id="app">
2 <button v-on:click="btnClick1">按钮1,无参</button>
3 <button v-on:click="btnClick2(1,msg,'abc')">按钮2,有参</button>
4 <button @click="btnClick3">无小括号获取事件对象</button>
5 <button @click="btnClick4(1,2,$event)">有小括号获取事件对象</button>
6 <button @click="changeData">点击修改data数据源</button>
7 </div>
 1     let app = new Vue({
2 el: '#app',
3 data: {
4 msg: 'Hello World!',
5 },
6 //事件对应的触发函数,写到methods字段里
7 methods: {
8 btnClick1() {
9 console.log('按钮1被点击了!');
10 },
11 btnClick2(a, b, c) {
12 console.log(a, b, c);//1,"Hello World!","abc"
13 },
14 btnClick3(e) {
15 console.log(e);//event
16 },
17 btnClick4(a, b, c) {
18 console.log(a, b, c);//1,2,event
19 },
20 changeData() {
21 this.msg = 'Hello Vue!';
22 },
23 }
24 });
如何解决vue里面的文本闪烁问题?
  文本闪烁:当加载vue.js文件不及时时,会导致vue的语法无法继续加载,页面会显示vue的原始语法,用户体验不好。
  解决办法:我们可以使用v-cloak指令解决,当vue.js文件没加载时,v-bloak会被识别为普通的自定义属性,
       我们让添加了该属性的元素display:none;一旦vue.js加载完毕,v-bloak就会被vue识别为指令,
       然后将v-bloak属性去除,则display:none;样式失效,进而显示内容。
1 [v-bloak] {
2 display: none;
3 }
1 <p v-cloak>{{'Hello Vue!'}}</p>



 

01.vue数据绑定的更多相关文章

  1. Vue数据绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...

  2. 浅析vue数据绑定

    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  5. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  6. Vue数据绑定(一)

    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...

  7. (三)vue数据绑定及相应的命令

    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...

  8. 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...

  9. vue数据绑定原理

    一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...

随机推荐

  1. JavaScript学习系列博客_18_JavaScript中的匿名函数

    匿名函数 - 用函数声明的方式创建一个函数时,不加函数名称. function sum(){ console.log("我是函数sum")} - 不加名称,这样写浏览器是会报错的. ...

  2. Kubernetes 中 Informer 的使用

    原文链接:https://mp.weixin.qq.com/s?__biz=MzU4MjQ0MTU4Ng==&mid=2247485580&idx=1&sn=7392dbadf ...

  3. Java 接口 抽象类 抽象方法

    abstract class elehousekeeping { //抽象家用电器类 abstract void opermode(); //抽象方法} class TV extends elehou ...

  4. jQuery源码分析系列(三)Sizzle选择器引擎-下

    选择函数:select() 看到select()函数,if(match.length === 1){}存在的意义是尽量简化执行步骤,避免compile()函数的调用. 简化操作同样根据tokenize ...

  5. SEO工程师考试题目

    http://www.wocaoseo.com/thread-201-1-1.html      SEO,全名Search Engine Optimization,其中文名字为'搜索引擎优化' .其英 ...

  6. synchronized的实现原理——对象头解密

    前言 并发编程式Java基础,同时也是Java最难的一部分,因为与底层操作系统和硬件息息相关,并且程序难以调试.本系列就从synchronized原理开始,逐步深入,领会并发编程之美. 正文 基础稍微 ...

  7. PyTorch迁移学习-私人数据集上的蚂蚁蜜蜂分类

    迁移学习的两个主要场景 微调CNN:使用预训练的网络来初始化自己的网络,而不是随机初始化,然后训练即可 将CNN看成固定的特征提取器:固定前面的层,重写最后的全连接层,只有这个新的层会被训练 下面修改 ...

  8. 轻量化模型训练加速的思考(Pytorch实现)

    0. 引子 在训练轻量化模型时,经常发生的情况就是,明明 GPU 很闲,可速度就是上不去,用了多张卡并行也没有太大改善. 如果什么优化都不做,仅仅是使用nn.DataParallel这个模块,那么实测 ...

  9. Codeforces1312E Array Shrinking 区间DP

    题意 给你一个数组\(a\),只要满足\(a_i=a_{i+1}\)就可以将这两个元素合并成一个值为\(a_i+1\)的元素,问数组最小长度. 解题思路 记得之前某场的F和这题差不多,当时好像是相邻且 ...

  10. Java远程连接Linux服务器并执行命令及上传文件

    最近再开发中遇到需要将文件上传到Linux服务器上,至此整理代码笔记. 此种连接方法中有考虑到并发问题,在进行创建FTP连接的时候将每一个连接对象存放至 ThreadLocal<Ftp> ...