Vue – 基础

Vue.js 核心特性

1. 数据驱动视图

  • 数据变化会自动更新到对应元素中,无需手动操作 DOM,这种行为称作单向数据绑定。
  • 对于输入框等可输入元素,可设置双向数据绑定。
    • 双向数据绑定是在数据绑定基础上,可自动将元素输入内容更新给数据,实现数据与元素内容的双向绑定。
  • Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
  • MVVM (Model – View – ViewModel )是一种软件开发思想
    • Model 层 –> 代表数据
    • View 层 –> 代表视图模板
    • ViewModel 层 –> 代表业务逻辑处理代码
  • 基于MVVM 模型实现的数据驱动视图解放了DOM操作(优)
  • View 与 Model 处理分离,降低代码耦合度(优)
  • 但双向绑定时的 Bug 调试难度增大(缺)
  • 大型项目的 View 与 Model 过多,维护成本高(缺)
 

2. 组件化开发

  • 组件化开发,允许我们将网页功能封装为自定义 HTML 标签,复用时书写自定义标签名即可。
  • 组件不仅可以封装结构,还可以封装样式与逻辑代码,大大提交了开发效率与可维护性。

Vue.js 安装

安装的三种方式:

  1. 本地引入:本地下载,导入vue.js文件的方式使用vue
  2. cdn 引入:建议采用:加载速度更快,使用script:src标签引入,版本更新时自动应用更新后版本
  3. npm 安装:使用 npm 命令安装
  • 本地引入

    • 开发版本:cn.vuejs.org/js/vue.js
    • 生产版本:cn.vuejs.org/js/vue.min.…
  • cdn 引入

    • 最新稳定版: cdn.jsdelivr.net/npm/vue
    • 指定版本:cdn.jsdelivr.net/npm/vue@2.6…
  • npm 安装

    • 最新稳定版:
      • npm install vue
    • 指定版本
      • npm install vue@2.6.12

EL 选项

  • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
  • 只有挂载元素内部才会被 Vue 进行处理,外部为普通 HTML 元素。
  • 代表 MVVM 中的 View 层(视图)。

挂载数据的方式:

可以为 CSS 选择器格式的字符串 或 HTMLElement 实例,但不能
为 html 或 body。

        /**
         * el 选项 挂载数据 方式 1
         */
        // 创建 vue 实例
        var vm = new Vue({
            // el 选项对象
            el: '#app'
        })
        console.log(vm.$el); // <div id="app"></div>



        /**
         * el 选项 挂载数据 方式 2
         */
        var app = document.querySelector('#app')
        // 创建 vue 实例
        var vm = new Vue({
            // el 选项对象
            el: app
        })
        console.log(vm.$el); // <div id="app"></div>
 

挂载完毕后,可以通过 vm.$el 进行访问

        /**
         * el 选项 挂载数据 方式 3
         */
        // 创建 vue 实例
        var vm = new Vue({})
        vm.$mount('#app')
        console.log(vm.$el) // <div id="app"></div>
 

未设置 el 的 vue 实例,也可以通过 vm.$mount() 进行挂载,参
数形式与 el 规则相同

    /**
    * el 选项 挂载数据 方式 4
    */
    var app = document.getElementById('app')
    // 创建 vue 实例
    var vm = new Vue({})
    vm.$mount(app)
    console.log(vm.$el) // <div id="app"></div>
 

插值表达式

挂载元素可以使用 Vue.js 的模板语法,模板中可以通过插值表达式为元素进行动态内容设置,语法为 {{ }}

注:

  • 插值表达式只能书写在标签内容区域,可以与其它内容混合。
  • 内部只能书写 JavaScript 表达式,不能书写语句。
    <!-- 
        挂载元素
     -->
    <div id="app">
        <p> 1 + 2 + 3 = {{ 1 + 2 + 3 }}</p>
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app'
        });

    </script>
 

data 选项

用于存储 Vue 实例需要使用的数据,值为对象类型。

data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。

data 中的数据可以直接在视图中通过插值表达式访问。

data 中的数据为响应式数据,在发生改变时,视图会自动更新。

data 中存在数组时,索引操作与 length 操作无法自动更新视图,这时可以借助 Vue.set() 方法替代操作。

Vue.set() 语法: Vue.set(vm.数组名, 数组下标, 生效的新内容)

methods 选项

methods:函数、方法

功能:用于存储需要在 Vue 实例中使用的函数。

methods 中的方法可以通过 vm.方法名 访问。

方法中的 this 为 vm 实例(this 代表函数所在的这个实例),可以便捷的访问 vm 数据等功能。

<!-- 挂载元素 -->
<div id="app">
<!-- <p>{{ add(加法) }}</p> -->
<p>{{ outPut(value1) }}</p>
<p>{{ fn(title) }}</p>
<p>{{ fn(content) }}</p>
</div>
<script src="lib/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 加法: 1 + 2 + 3
value1: '1-2-3-4-5-6',
title: '我是标题',
content: '我是内容'
},
methods: {
outPut(value) {
// return this.加法;
// 截取 value1 字符串
return value.split('-').join('')
},
fn() {
console.log('title:' + this.title + '1');
console.log('content' + this.content + '2');
}
}
});
</script>

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14655.html

发表评论

登录后才能评论