[成都|内门弟子]CSS-何俊|2021年04月11日的日报-技能树.IT修真院

发表于： 2021-04-11 20:13:58

1 990

今天完成的事情：

vue介绍：

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，便于与第三方库或既有项目整合，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

声明式渲染：

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

    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>

条件与循环：

控制切换一个元素是否显示：

<div id="app-3">
  <p v-if="seen">显示</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

处理用户输入：

v-on 指令添加一个事件监听器

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

vue安装：

兼容性

Vue 不支持 IE8 及以下版本

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量

NPM

在用 Vue 构建大型应用时使用 NPM 安装

$ npm install vue

运行时 + 编译器 vs. 只包含运行时：

        // 需要编译器
        new Vue({
            template: '<div>{{ hi }}</div>'
        })

        // 不需要编译器
        new Vue({
            render(h) {
                return h('div', this.hi)
            }
        })

模板语法：

插值

    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <button v-bind:disabled="isButtonDisabled">Button</button>

使用 JavaScript 表达式

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id"></div>

指令：

v-if ：将根据表达式 seen 的值的真假来插入/移除 <p> 元素

参数v-bind ：可以用于响应式地更新 HTML attribute

明天的计划：

看vue计算属性，class与style绑定，渲染

返回列表

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年04月11日 的日报 中品

评论

分享到

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年04月11日的日报中品