VueJS前端框架学习

Vue介绍

MVVM模式

Model：模型层，这里标识JavaScript对象
View：视图层，在这里表示DOM（HTML操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue7个属性

el：
data：将视图层的数据抽象出来存放在data中
template：用来设置模板
methods：放置页面中的业务逻辑，js方法一般放置在methods中
render：创建真正的Virtual Dom
computed：用来计算
watch：
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值

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不可以省略后缀：

import test from './test.json' 省略为：import test from './test' 则编译出错。

那么，若test.vue，test.js同时存在于同一个文件夹下，则import的导入优先级是： js > vue

from后的来源除了文件，还可以是文件夹：

import test from './components'

该情况下的逻辑是：

if(package.json存在 && package.main字段存在 && package.main指定的js存在) {
取package.main指定的js作为from的来源，即使该js可能格式或内容错误
} else if(index.js存在){
取index.js作为from的来源
} else {
取index.vue作为from的来源
}
因此若from的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；若不满足，则加载index.js；若不满足，则加载index.vue。

注意加载文件夹的形式，与上面省略后缀的形式是完全相同的。所以一个省略后缀的from来源，有可能是.vue，.js，或者文件夹。

例：

查看Vue-Element-Admin的源码，其中有个Layout.vue：

里面调用import导入了3个组件：

import { Navbar, Sidebar, AppMain } from './components'

这里，from的路径'./components'就是个文件夹。

于是，按照前面的规则，首先查看文件夹下是否有package.json：

并没有package.json。

package.json不存在，那么查找index.js。index.js是存在的，于是加载。

打开index.js：

export { default as Navbar } from './Navbar'

export { default as Sidebar } from './Sidebar'

export { default as AppMain } from './AppMain'
可以看到3个export，都没有后缀，所以其类型vue，js和文件夹都是有可能的。

同一级目录下，存在AppMain.vue和Navbar.vue，没有同名js，所以可以判断出这两个都是加载的vue文件，即：

export { default as Navbar } from './Navbar.vue'

export { default as AppMain } from './AppMain.vue'

而Sidebar只有一个文件夹，所以是加载的文件夹。打开Sidebar文件夹：

优先找package.json。不存在。

然后找index.js，不存在。

最后找index.vue，存在。

于是：

export { default as Sidebar } from './Sidebar'

相当于：

export { default as Sidebar } from './Sidebar/index.vue'

这样，Layout.vue就通过加载一个文件夹，获得了3个vue组件。

原文：https://blog.csdn.net/fyyyr/article/details/83657828

Vue基础

vue文件有三个部分组成：Temliate、Script、 Style

template是模板，这里面是XML语言，其标签必须是闭合的。原因：因为XML更加严谨，降低编译器的编写复杂度
script标签是该组件Vue的实例，data使用函数的形式，防止多次调用的对象污染

<script>
  export default{
      data(){
      m:0
      }
  }
</script>

style是css样式，可以使用scss

Vue语法

内容展示语法

内容展示语法：插值、v-text、v-html、v-pre

插值语法：使用表达式插入已有的数据、数据的处理、函数的返回

例：{{xxx}}插入data、或omputed数据中

注意：如果值为null、undefined，则vue不会将它们渲染到视图
v-html ：插入html标签

<div v-html="<strong>hi</strong>"></div> 插入一段strong标签
v-pre ：preview预览，不对语句做任何编译

<div v-pre>{{ n }}</div> 就是简单的 {{n}} 字符串。
v-text

<div v-text="n+2"></div>=<div>{{n+1}}</div>

绑定属性

v-bind

语法：v-bind:参数='值'

绑定属性：<img v-bind:src='x'/>，冒号后面的值默认是JS表达式，所以这里的x是JS表达式，会先求x的变量然后赋值给src。

v-bind简写：<img v-bind:src='x'/>=<img :src='x'/>

绑定一个对象：<div :style="{border:1px solid red , height:100}"></div>vue中的CSS样式单独单位默认是px

绑定事件

v-on

语法：v-on:事件类型='处理函数'，处理函数有3种类型，函数名、JS表达式、函数调用态

处理函数名：<button v-on:click='add'>按钮</button>点击后触发add函数。

处理js表达式：<button v-on:click='n+=1'>按钮</button>

处理函数调用态：<button v-on:click='add(1)'>按钮</button>这里add(1)并不是直接调用，点击之后才会调用add(1) 。

注意如果返回的如果是一个函数，而使用者希望把这个返回的函数作为处理函数的话，Vue并不能实现这个功能。

简写：v-on简写为@,<button v-on:click='add'>按钮</button> = <button @click='add'>按钮</button>

如：
v-on:事件="xxxx"

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"吴签"
        },
        methods:{
            //方法必须定义在Vue的Methods对象中
            sayHi:function (event) {
                alert(this.message)
            }
        }
    });
</script>
<div id="app">
    <button v-on:click="sayHi"></button>
</div>

条件判断

v-if、v-else-if、v-else

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

注意 v-else-if、v-else的使用前提的是：前一兄弟元素必须有 v-if 或 v-else-if。

循环

v-for(value, key) in object/array

value就是每一项的值；

key为关键字：在对象中是每一项的属性名，而在array中则是索引

注意：使用循环时一定要在后面绑定一个 key属性，这个key和上面所说的key不是一个意思，这个绑定的key属性可以是数组的索引，也可以是唯一的id（key属性的值必须是唯一的），如：:key='u.id'，最好别用数组的索引作为为key的值，某些情况有bug。

显示隐藏

v-show

根据表达式的值的真假条件,显示与隐藏元素。
v-show与v-if的区别：

v-show：通过改变元素css样式中的display来切换显示与隐藏。

v-if：通过是否渲染元素到html结构中来实现显示与隐藏。

如果在实际使用上显示与隐藏的切换比较频繁，使用v-show可以节省性能；反之是用v-if比较合适。

注意这个指令对DOM元素的渲染是通过改变display为none或其他来实现的。注意不是所有看得见的元素都是 display:block；table的display是table；li的display是list-item

posted @ 2021-08-01 22:53 Leejk 阅读(88) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Lee's Blog

念头通达