vue学习笔记

最新推荐文章于 2024-05-30 13:09:09 发布

php的绯闻女友

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量126

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Moxi099/article/details/114793652

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

2021年3月14日晴穿了黄色毛衣，很开心

第一课：初识vue

定义：vue是一个渐进式的框架

vue有很多特点和高级功能：解耦视图和数据、可复用的组件、前端路由技术、状态管理、虚拟DOM

第二课：vue.js安装

方式一：CDN引入

方式二：下载和引入

开发环境：https://cn.vuejs.org/js/vue.js 生产环境：https://cn.vuejs.org/js/vue.min.js

方式三：NPM安装

第三课：vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',//用于挂载要管理的元素
        data:{//定义数据
            message:'hello world!'
        }
    })
</script>
</body>
</html>

2021年4月11日时隔这么久，终于又重拾vue，看视频太慢了，我决定先把官方文档看一遍吧

地址

<div id="app-2">
  <span v-bind:title="message">
    hahaha
  </span>
</div>
<div id="app-3">
    <p v-if="seen">现在你看见我了</p>
</div>
<div id="app-4">
    <ol>
<!--v-for 绑定数组的数据来渲染一个项目列表-->
        <li v-for="todo in todos">
            <h1>{{todo.text}}</h1>
        </li>
        <li v-for="todo in todos">{{todo.name}}</li>
    </ol>
</div>
<div id="app-5">
    <p>{{message}}</p>
<!--v-on 添加一个事件监听器-->
    <button v-on:click="reverseMessage">反转信息</button>
</div>
<div id="app-6">
    <p>{{message}}</p>
<!--v-model 实现表单输入和应用状态之间的双向绑定   -->
    <input v-model="message">
</div>
<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>


<script src="../js/vue.js"></script>
<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
    var app3=new Vue({
        el:'#app-3',
        data: {
            seen:false
        }
    })
    var app4=new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:'学习JavaScript',name:'h'},
                {text:'学习vue',name:'f'},
                {text:'整个牛项目',name:'y'}
            ]
        }
    })
app4.todos.push({text:'新项目',name:'猪猪'})

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

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

//    注册组件
    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: '你'}
            ]
        }
    })

今天就学到这里吧。。还有单词没背和小程序没写