写文章

前端学习-Vue

吐槽君 分类：javascript

核心特性

数据驱动视图

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

组件化开发

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

基础语法

Vue 实例

  • 通过 Vue 函数创建的对象，是使用 Vue 功能的基础。
new Vue({
  //选项对象
});

el 选项

  • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
  • 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
  • 代表 MVVM 中的 View 层(视图)。
  • 可以为 CSS 选择器格式的字符串 或 HTMLElement 实例，但不能为 html 或 body。
var vm = new Vue({
   el: '#app'
});

var app = document.querySelector('#app');
var vm = new Vue({
    el: app
});
  • 挂载完毕后，可以通过 vm.$el 进行访问。
var vm = new Vue({
    el: '#app'
});

console.log(vm.$el);
  • 未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。
var app = document.getElementById('app');
var vm = new Vue({});
vm.$mount(app);

插值表达式

  • 挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}。
<li>第一段示例内容：{{ 10 + 20 + 30 }}</li>
<li>第二段示例内容：{{ 22 > 3 ? '22比3大' : '3比22大' }}</li>

<!-- 错误写法 -->
<!-- <li id="{{ 1 + 2 }}"></li> -->
<!-- <li>{{ var num = 100; }}</li> -->

注意点:

  • 插值表达式只能书写在标签内容区域，可以与其它内容混合。
  • 内部只能书写 JavaScript 表达式，不能书写语句。

data 选项

  • 用于存储 Vue 实例需要使用的数据，值为对象类型。
  • data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。
var vm = new Vue({
    el: '#app',
    data: {
      title: '标题文本'
    }
});

console.log(vm.$data.title);
console.log(vm.title);
  • data 中的数据可以直接在视图中通过插值表达式访问。
  • data 中的数据为响应式数据，在发生改变时，视图会自动更新。
<div id="app">
    <p>{{ title }}</p>    
</div>

<script>
   var vm = new Vue({
    el: '#app',
    data: {
      title: '标题文本',
    }
});

vm.title = '新的标题内容';
</script>
  • data 中存在数组时，索引操作与 length 操作无法自动更新视图， 这时可以借助 Vue.set() 方法替代操作。
var vm = new Vue({
    el: '#app',
    data: {
      arr: ['内容1', '内容2', '内容3']
    }
});

Vue.set(vm.arr, 0, '新内容');

methods 选项

  • 用于存储需要在 Vue 实例中使用的函数。
  • methods 中的方法可以通过 vm.方法名 访问。
  • 方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能。
 <div id="app">
    <p>{{ fn(title1) }}</p>
    <p>{{ fn(title2) }}</p>
    
    <p>{{ title1.split('-').join('') }}</p>
    <p>{{ title2.split('-').join('') }}</p>
 </div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    prefix: '处理的结果为：',
    title1: 'a-b-c-d-e',
    title2: 'x-y-z'
  },
  methods: {
    fn (value) {
      // console.log(this);
      this.fn1();
      this.fn2();
      return this.prefix + value.split('-').join('');
    },
    fn1 () {
      console.log('执行了 fn1 的代码');
    },
    fn2 () {
      console.log('执行了 fn2 的代码');
    }
  }
});

// console.log(vm)
</script>

回复

我来回复

  • 暂无回复内容