前端学习-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>
 
 
 

回复

我来回复
  • 暂无回复内容