vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

JavaScript011

vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一),第1张

项目首页由顶部导航栏,左侧导航栏,中间内容区构成,如图

在app.vue引入element-ui,然后就可以在其他任何页面中使用了

将app.vue改为以下内容

1、安装node(自带npm包管理工具)

2、安装vue2.x脚手架:npm install vue-cli -g,控制台输入vue list查看是否安装成功

3、创建项目:vue init webpack my-project

4、安装postcss-px2rem:npm install postcss-px2rem

5、配置:找到文件build/vue-loader.config.js,添加如下:

const px2rem = require('postcss-px2rem')

// 配置remUnit

postcss: function() {

        return [px2rem({remUnit: 75})]

}

6、在index.html中添加根font-size大小

<script>

      document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px'

      window.addEventListener("resize",()=>{

      document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px'

    })

</script>

一、vuejs 2.0中js实时监听input

在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" 。绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例。

因为 v-ref 不再是一个指令了而是一个特殊的属性,它也可以被动态定义了。这样在和v-for 结合的时候是很有用的:

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

以前 v-el/v-ref 和 v-for 一起使用将产生一个DOM数组或者组件数组,因为没法给每个元素一个特定名字。现在你还仍然可以这样做,给每个元素一个同样的ref:

<p v-for="item in items" ref="items"></p>

和 1.x 中不同, $refs 不是响应的,因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。另一方面,设计$refs主要是提供给 js 程序访问的,并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态,违背了 Vue 数据驱动的思想。

二、vuejs 1.x中js实时监听input

在vuejs 1.x的版本中在js中监听某个指定的input的value变化

通过如下方式:

<input type="text" v-model="items.type1" v-el:texttype1/>

然后在vuejs中的watch中监听:

整体代码: