vue | 易学教程

Vue指令之`v-text`和`v-html`

阅读更多关于 Vue指令之`v-text`和`v-html`

v-text：没有加载闪烁问题，它会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符，不会把整个元素的内容清空。 v-html：使用v-html可以把标签元素也能显示在元素上 <div>{{msg2}}</div> <div v-text="msg2"></div> <div v-html="msg2">1212112</div> <script> var vm = new Vue({ el: '#app', data: { msg: '123', msg2: '<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>', mytitle: '这是一个自己定义的title' }, methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 show: function () { alert('Hello') } } }) 来源： https://www.cnblogs.com/xiaowie/p/11572015.html

vue 安装使用 Element-ui

阅读更多关于 vue 安装使用 Element-ui

# npm 安装 npm i element-ui -S # 引入 Element 在 main.js 中写入以下内容： import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' ; import 'element-ui/lib/theme-chalk/index.css' ; Vue . use ( ElementUI ) ; new Vue ( { el : '#app' , render : h => h ( App ) , router , components : { App } , template : '<App/>' } ) ; # 愉快的开始使用吧来源： CSDN 作者： java打字员链接： https://blog.csdn.net/weixin_42863549/article/details/104571396

vue的生命周期

阅读更多关于 vue的生命周期

vue官网生命周期图: vue的生命周期有: created 数据已经初始化完成,方法可以调用,DOM还未渲染时实例加载. beforeMount 数据初始化完成,DOM还没挂载,数据的双向绑定还是显示{{}},因为Vue采用虚拟DOM技术.先占住位置. mounted 数据和DOM完成挂在,在上一个周期占位的数据把值渲染进去.这个周期适合执行初始化需要操作DOM的方法. beforUpdate 只要是页面数据改变了都会触发，数据更新之前触发，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行 updated 只要是页面数据改变了都会触发，数据更新完毕之后才触发. beforeDestroy 这个周期是在组件销毁之前执行 Destroyed 当我们离开这个页面的时候，便会调用这个函数，常用来销毁一些监听事件及定时函数来源： CSDN 作者： weixin_45081066 链接： https://blog.csdn.net/weixin_45081066/article/details/104569204

Vue中 key keep-alive

阅读更多关于 Vue中 key keep-alive

keep-alive key <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <div id="app"> <keep-alive> <child-component key="1" v-if="seen" name="1"></child-component> <child-component key="2" v-if="!seen" name="2"></child-component> </keep-alive> <button @click="toggle">toggle</button> </div> <script type="text/javascript"> Vue.component('child-component', { template: `<input type="text" placeholder="enter">`, data() { return {} }, props: ["name"], mounted() { console.log(`${this.name} mounted`) } }) const vm = new Vue({ el: "#app",

vue的过滤器filter

阅读更多关于 vue的过滤器filter

前记：　　　排版记录，未免太耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍：某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* eslint-disable */ let r = /[^\x00-\xff]/g // 双字节正则 let m if (str.replace(r, '**').length > length) { m = Math.floor(length / 2) for (let i = m, l = str.length; i < l; i++) { if (str.substr(0, i).replace(r, '**').length >= length) { return str.substr(0, i) + sufix } } } return str }) 然后在某一个组件中引用 import { limitWordLength } from '../filter.js' 使用：

Vue，组件-组件的创建方式1.1

阅读更多关于 Vue，组件-组件的创建方式1.1

Vue，组件-组件的创建方式1.1 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <script src="../js/vue.js"></script> 10 <body> 11 <div id="app"> 12  13  14 <my-com1></my-com1> 15 </div> 16 </body> 17 </html> 18 <script> 19 20 // 1.1 使用 Vue.extend 来创建全局的Vue组件 21 var com1 = Vue.extend({ 22 template:'<h3>这是使用Vue

You are using the runtime-only build of Vue where the template compiler is not available. Either pre

阅读更多关于 You are using the runtime-only build of Vue where the template compiler is not available. Either pre

欢迎访问我的个人博客： http://www.xiaolongwu.cn 在升级脚手架到vue-cli3.0版本的时候出现了这个报错： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 我在这里大概说一下出现这个报错的原因在哪里和解决办法原因 vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式，指向了"dist/vue.runtime.common.js"位置。这是vue升级到2.0之后就有的特点。而我的main.js文件中，初始化vue却是这么写的，这种形式为compiler模式的，所以就会出现上面的错误信息 // compiler new Vue({ el: '#app', router: router, store: store, template: '<App/>', components: { App } }) 1 2 3 4

vue父子组件通信

阅读更多关于 vue父子组件通信

Vue父子组件通信一、父组件 => 子组件 1. 父组件向子组件传递值通过 props 传递属性。 2. 父组件调用子组件比如某父组件中有个子组件vue-pager，然后现在要点击父组件中的一个按钮，调用子组件中的方法。需要在父组件模板中，用ref标记子组件，然后用this.$refs.[name].[method]调用即可。父组件: <template>  <div> <button @click="clickEvent">btn</button> <vue-pager :pagerData="pagerDataOfDrug" :condtion="pagerCondtion" ref="vuePager"> </vue-pager>  </div> </template> <script> export default { methods: { clickEvent() { // console.log(this.$refs.vuePager); this.$refs.vuePager.childMethod(); } } } </script> 子组件: childMethod() { } 二、子组件 => 父组件 1. 通过$on $emit做事件监听与触发通过 $on(eventName) 监听事件

vue使用import来引入组件的注意事项

阅读更多关于 vue使用import来引入组件的注意事项

Vue使用import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的： module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } ... } 这里的extensions指定了from后可导入的文件类型。而上面定义的这3类可导入文件，js和vue是可以省略后缀的： import test from './test.vue' 等同于： import test from './test' 同理： import test from './test.js' 等同于：import test from './test' json不可以省略后缀那么，若test.vue，test.js同时存在于同一个文件夹下，则import的导入优先级是：js>vue from后的来源除了文件，还可以是文件夹：import test from './components' 该情况下的逻辑是： if(package.json存在 && package.main字段存在 && package.main指定的js存在) { 取package

VueJs 监听 window.resize 方法

阅读更多关于 VueJs 监听 window.resize 方法

Vuejs 本身就是一个 MVVM 的框架。但是在监听 window 上的事件时，往往会显得力不从心。比如这次是 window.resize 恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。问题：今天我也遇到了这样一个问题，是关于canvas 自适应。根据窗口的变化去变化 canvas 的宽度备注：重要的问题说三遍解决框架内的bug 先说框架版本版本版本（这里用的 Vue 2.x 、ES6）解决方案：第一步：先在 data 中去定义一个记录宽度是属性 data: { screenWidth: document.body.clientWidth // 这里是给到了一个默认值（这个很重要） } 第二步：我们需要讲 reisze 事件在 vue mounted 的时候去挂载一下它的方法 mounted () { const that = this window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } } 第三步： watch 去监听这个属性值的变化，如果发生变化则讲这个val 传递给 this

订阅 vue