初识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>

6. 工具

vue在线练习工具:https://jsfiddle.net
web学习手册:https://developer.mozilla.org/zh-CN/docs/Web

=======================================================

注:该部分为学习vue手册摘录下来的,仅供个人加深学习印象、方便整理、及以后有新的学习到的东西便于补充

内容概要:本文档主要展示了C语言中关于字符串处理、指针操作以及动态内存分配的相关代码示例。首先介绍了如何实现键值对(“key=value”)字符串的解析,包括去除多余空格和根据键获取对应值的功能,并提供了相应的测试用例。接着演示了从给定字符串中分离出奇偶位置字符的方法,并将结果分别存储到两个不同的缓冲区中。此外,还探讨了常量(const)修饰符在变量和指针中的应用规则,解释了不同类型指针的区别及其使用场景。最后,详细讲解了如何动态分配二维字符数组,并实现了对这类数组的排序与释放操作。 适合人群:具有C语言基础的程序员或计算机科学相关专业的学生,尤其是那些希望深入理解字符串处理、指针操作以及动态内存管理机制的学习者。 使用场景及目标:①掌握如何高效地解析键值对字符串并去除其中的空白字符;②学会编写能够正确处理奇偶索引字符的函数;③理解const修饰符的作用范围及其对程序逻辑的影响;④熟悉动态分配二维字符数组的技术,并能对其进行有效的排序和清理。 阅读建议:由于本资源涉及较多底层概念和技术细节,建议读者先复习C语言基础知识,特别是指针和内存管理部分。在学习过程中,可以尝试动手编写类似的代码片段,以便更好地理解和掌握文中所介绍的各种技巧。同时,注意观察代码注释,它们对于理解复杂逻辑非常有帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值