初识vue

最新推荐文章于 2025-05-21 00:58:09 发布

星星有所不知

最新推荐文章于 2025-05-21 00:58:09 发布

阅读量142

点赞数

分类专栏： Vue

Vue 专栏收录该内容

16 篇文章

订阅专栏

初识vue

1. 在线引入Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，删除了告警，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

或者:

<script src="https://unpkg.com/vue"></script>

2. 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<div id="app">{{ message }}</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

3. 指令

v-bind – 数据绑定指令如v-bind:title="message"可简写为 :title="message"
v-on – 事件绑定如v-on:click="clickItme"可简写为@click="clickItme"
v-model-- 数据双向绑定指令，能轻松实现表单输入和应用状态之间的双向绑定

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

4. 组件化应用构建

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

4.1 Vue中注册组件：

  // 定义名为 todo-item 的新组件
  Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
  })

4.2 使用prop从父性作用域将数据传到子组件，子单元通过 prop 接口与父单元进行了良好的解耦

<div id="app-7">
  <ol>
      <!--现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”-->
      <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id">
      </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
      groceryList: [{ id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }]
  }
})

5. 响应式数据

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。

值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果在实例创建之后，添加一个新的属性 b ，那么对 b 的改动将不会触发任何视图的更新。

如果会在晚些时候需要一个属性，但是一开始它为空或不存在，那么仅需要设置一些初始值。如：

data: {
    newTodoText: '',
    visitCount: 0,
    hideCompletedTodos: false,
    todos: [],
    error: null
}

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

var obj = {
    foo: 'bar'
}
Object.freeze(obj)
new Vue({
    el: '#app',
    data: obj
})

<div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it</button>
</div>