【web高级 01vue 】 vue预习课02 hello vue更多

核心知识01–Hello World

引入vue

vue的安装

Hello World

创建我们第一个vue程序

 <!-- 宿主文件 -->
<div id="app">
    {
    
    {
    
    title}}
</div>

<script src="vue.js"></script>
<script>
    //1.创建vue实例
   const app =  new Vue({
    
    
        el:"#app",
        data() {
    
    
            return {
    
    
                title: 'hello，vue！'
            }
        },
    });

    setTimeout(()=>{
    
    
        app.title = "mua~，vue！";
    },1000);

</script>

理解vue设计思想

• 数据驱动应用
• MVVM模式的践行者

MVVM框架的三要素：响应式、模板引擎、及其渲染

响应式：vue如何监听数据变化？

模板：vue的模板如何编写和解析？

渲染：vue如何将模板转为html？