Vue学习 Day01

时间 2020-01-01

标签 vue 学习 day01 day 繁體版

原文原文链接

介绍

这个系列记录本身学习Vue的过程.html

Vue官方不推荐新手直接使用 vue-cli,因此前面这几天都是根据官方文档学习.vue

步骤

新建一个html文件.vue-cli

在html中导入vue.js依赖.npm

<head>
 <meta charset="utf-8">
 <title>firstvue</title>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- 生产环境版本，优化了尺寸和速度 -->
 <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
 </head>

如今就能够照着官方的例子学习了.app

例子

声明式渲染

数据和 DOM 创建了关联,修改了js中data的值,DOM也会发生变化.ide

Hello Vue组件化

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

JS代码：学习

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

v-bind 指令¹,做用是:鼠标停留几秒,会有提示信息.优化

<div id="app-2">
     <span v-bind:title="message">
         鼠标悬停几秒钟查看此处动态绑定的提示信息！
     </span>
 </div>

JS代码：ui

var app2 = new Vue({
     el: '#app-2',
     data: {
         message: '页面加载于 ' + new Date().toLocaleString()
     }
 })

条件与循环

控制元素显示使用 v-if，seen的值决定是否显示.

<div id="app-3">
     <p v-if="seen">如今你看到我了</p>
 </div>

JS代码：

var app3 = new Vue({
     el: "#app-3",
     data: {
         seen: true
     }
 })

循环使用v-for ,在控制台输入app4.todos.push({text: 'push text'}),列表添加一个项

<div id="app-4">
     <ol>
         <li v-for="todo in todos">
             {{ todo.text }}
         </li>
     </ol>
 </div>

JS代码：

var app4 = new Vue({
     el: "#app-4",
     data: {
         todos: [
             { text: '学习Vue' },
             { text: '整个项目' },
             { text: '完成毕设' }
         ]
     }
 })

处理用户输入

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

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>

JS代码：

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

v-model 轻松实现表单输入和应用状态之间的双向绑定.

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

JS代码：

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

组件化应用构建

组件系统是 Vue 的另外一个重要概念，由于它是一种抽象，容许咱们使用小型、独立和一般可复用的组件构建大型应用。

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

JS代码：

Vue.component('todo-item', {
    // todo-item 组件如今接受一个
    // "prop"，相似与一个自定义特性。
    // 这个prop 名为todo。
    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: '随便其它什么人吃的东西' }
        ]
    }
})

(假想)大型应用模板

<div id="app">
<app-nav></app-nav>
<app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
</app-view>
</div>

源码下载

https://www.lanzous.com/b00t79wkd
密码:Vue01

注解

el：对应div中的id

data：存放数据

methods: 存放方法

指令是Vue提供的特殊特性,指令带有前缀 v-.↩

1. Vue学习笔记day01总结
2. Python学习 day01
3. Linux学习day01
4. JAVA学习Day01
5. JAVA学习DAY01
6. Django学习 day01
7. jQuery学习day01
8. Git学习 --day01
9. JavaEE学习 day01
10. SpringCloud学习day01
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议