Vue基本用法

Vue:渐进式javascript框架

声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建

Vue的基本使用

Vue的两种挂载方式:

模板语法:

1插值表达式

存在闪动问题:快速刷新浏览器时,有时会显示{{xxx}}内容,然后替换为要显示的值解决的办法-->指令(先隐藏,替换好值之后再显示)

2指令(指令的本身就是自定义属性)

以v-开头 例如v-cloak

html:

js

效果:

使用v-cloak

html:

css:

效果:

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2MVVM私享

M(model)

V(view)

VM(view-model)

mvc,mvp和mvvm的区别:

>})//使用v-html指令输出data中的html元素

<div v-html="my_html"></div>

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容

html：

<div class="head-h1" ref="company_name" >{{datascompany_name}}</div>

js：当页面刚加载完，通过接口获取{{datascompany_name}}的值，要对里面的值编辑时

this$refscompany_name  拿不到值

解决办法：

接口响应完，this$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this$nextTick(_=>{

        。。。。

            this$refs company_name

})

在项目中遇到解析html，发现v-html并不满足复杂的渲染，就使用jq来处理

1v-html 处理简单的标签

如：text="<p>vue转换</p>"

html中解析：

<p v-html="text">{{text}}</p>

2返回标签中还有img、a标签，使用v-html就不会转换方法如下：

使用jquery处理:

1在标签定义class

<div class="descript"></div>

2安装jq

npm install jquery --save

3在使用的地方引入

import $ from 'jquery'

async loadProductDetail(cData) {

const { data } = await getProductDetail(cData)

thisdescript = datadatasku //接口返回数据赋值

thisloadhtml() //调用方法

},

loadhtml() {

('descript')html(thisdescript) //赋值

const srcdescript = ('descript')find('img') //找到当前所有的a标签、img标签

for (let i = 0; i < srcdescriptlength; i++) { //遍历

let a = srcdescripteq(i)attr('href') //找到a标签的href属性

let b = evalseq(i)attr('src') //找到img标签的src属性

//this url + a) //赋值

srcdescripteq(i)attr('src', this$url + b) //赋值

//如果接口返回有就不添加:

// srcdescripteq(i)attr('href', a) //赋值

//srcdescripteq(i)attr('src', b) //赋值

}

}

根据需求想要一个可以根据文字内容撑开高度，同时延伸背景图（因为我想要一个虚线的效果），textarea无法自适应，用div的可编辑效果contenteditable = true来实现，遇到了几个问题。

1、设置div的初始化高度min-height: 700px;

2、div的内容需要通过@input来绑定etargettextContent

3、可编辑的div，光标会在输入完成时跳到最前，解决方式是通过range对象的moveStart()函数

第步创建静态HTML5页面vmodelhtml并引入vueminjs文件

第二步body元素内插入div并div引入input输入框label标签

第三步调用初始化Vuejs并给输入框赋值

第四步预览该静态页面页面显示默认显示值

第五步减少输入框字符发现面内容跟着减少

第六步添加输入框字符面内容随增加展示数据双向绑定

可编辑div可能很简单 contenteditable="true" 就能实现了

但是，，，输入一个字的时候，焦点会自动跳到文本开头，很烦的有木有

在网上看见一个大神写的，引用过来，很久了，忘记了出处

将可编辑div单独设置成一个组件

子组件中

<template>

  <div class="edit" placeholder="11"

      v-html="innerText"

      :contenteditable="canEdit"

      @focus="isLocked =true"

      @blur="isLocked =false"

      @input="changeText">

</template>

watch: {

'value'(){

if (!thisisLocked && !thisinnerText) {

thisinnerText =thisvalue;

    }

}

},

methods: {

changeText(){

this$emit('input', this$elinnerHTML);

  }

},

父组件中只要 v-model='你想要绑定的数据'

对vue不熟悉，，当然这位大神也说看下官方文档v-model这一块

大致是如果父组件的v-model会首先绑定子组件的emit的input方法

需要有一个可拖拽的div元素。

1、该div元素应设置draggable=true属性来标识该元素可拖拽。

2、为该div元素添加一个v-on：dragstart监听事件，该事件函数接收一个event参数。

3、其中包含所拖动的div元素和其他数据，该事件函数可以用来获取拖拽的元素的信息，并将其存入dataTransfer对象中，以便在放置时提取这些数据。

4、为要放置的元素添加一个v-on：drop监听事件，该事件函数会接收一个event参数，在该事件中，可使用dataTransfergetData()方法取出之前传入的数据。

5、将该数据写入下拉框中即可完成拖拽到下拉框的功能。

以上就是关于Vue基本用法全部的内容，包括:Vue基本用法、vue.js获取到的数据中所含的html元素如何按html正常显示、vue 无法获取DOM的innerHtml等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！