Vue.js With no Tool-Chain

准备

https://vuejs.org/guide/quick-start.html
代码编辑器：VSCode
浏览器开发工具（用于调试）：Vue.js devtools

rkun1@LAPTOP-TUS5FU0D MINGW64 /c/code
$ mkdir VUE-START

rkun1@LAPTOP-TUS5FU0D MINGW64 /c/code
$ cd VUE-START/

rkun1@LAPTOP-TUS5FU0D MINGW64 /c/code/VUE-START
$ code .

创建index.html文件

    
    
    
    
    
    



    

        
{{ pageTitle }}
        
{{ content }}
    
    

1. 引入了 Vue.js 库和 Bootstrap 样式。
2. 在页面中创建了一个 Vue 应用的根元素（
   ）。
3. 使用 Vue 数据绑定将数据（pageTitle 和 content）渲染到页面上。
4. 在脚本部分使用 Vue.createApp 创建了一个 Vue 应用，并通过 mount 方法将其挂载到具有 id “app” 的元素上。
5. 定义了两个数据属性 pageTitle 和 content，它们分别用于渲染页面上的标题和段落内容。

使用循环创建内容

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    {{ link }}
                
            
        
    
    

        
{{ pageTitle }}
        
{{ content }}
    
    

1. 新增的部分主要是一个bootstrap简单的导航栏（navbar），以及对导航栏中链接的动态渲染。
2. v-for=“link in links”：使用 Vue 的 v-for 指令，遍历 links 数组中的每个元素。
3. 通过 Vue 的数据绑定和循环指令，动态地生成了一个简单的导航栏，链接的文本内容来自于 links 数组。

绑定数据到属性

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    {{ link.text }}
                
            
        
    
    

        
{{ pageTitle }}
        
{{ content }}
    
    

1. 在导航栏链接的部分，使用了动态绑定（:href 和 :title）来使链接的href属性和title属性动态地从数据中获取。
   • :href=“link.url”：链接的 href 属性被绑定到 link.url，这样每个链接都有不同的目标页面。
   • :title=“this link goes to the ${link.text} page”：链接的 title 属性也被绑定到一个动态字符串，以提供更具体的链接说明。
2. links 数组的数据结构进行了更改，每个链接现在包含了 text 和 url 两个属性。这使得链接的文本和目标 URL 可以动态配置。

• 数据动态变化

因为没有编写页面，所以点击任意一个导航，都会出现

设置事件

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    

                        {{ page.link.text }}
                
            
        
    
    

        
{{ pages[activePage].pageTitle }}
        
{{ pages[activePage].content }}
    
    

使用 v-for 遍历 pages 数组中的每个页面，并将其相关信息绑定到导航栏链接。通过 @click.prevent 监听点击事件，当用户点击链接时，更新 activePage 的值为当前页面的索引，从而切换到对应的页面。prevent 修饰符用于防止点击事件的默认行为，例如阻止链接跳转或表单的提交。
@click.prevent=“activePage = index” 这行代码表示当用户点击导航栏中的链接时，将会触发一个点击事件，而 .prevent 修饰符阻止了这个点击事件的默认行为。在这个上下文中，默认行为通常是链接跳转。因此，点击链接时不会像通常一样跳转到链接指定的页面，而是触发了你在 @click 处理函数中定义的逻辑，即更新 activePage 的值为当前页面的索引，实现了页面切换的功能。

绑定CSS样式类

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    

                        {{ page.link.text }}
                
            
            

                
                    Toggle NavBar
                

            
        
    
    

        
{{ pages[activePage].pageTitle }}
        
{{ pages[activePage].content }}
    
    

1. 使用了 Vue.js 的动态 class 绑定功能，通过 :class 属性动态地设置 navbar 元素的类，以根据 useDarkNavBar 的值切换不同的样式。
2. :class 属性，它接受一个对象，对象的键是类名，值是布尔表达式。如果值为 true，则该类名将被应用，如果值为 false，则该类名将被移除。因此，根据 useDarkNavBar 的值，navbar 元素会切换在明亮主题和暗黑主题之间。

点击按钮，切换样式

使用Computed Properties

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    

                        {{ page.link.text }}
                
            
            

                
                    Toggle NavBar
                

            
        
    
    

        
{{ pages[activePage].pageTitle }}
        
{{ pages[activePage].content }}
    
    

Vue.js的computed属性来计算navbarClasses，这是一个基于useDarkNavBar数据属性的计算属性。computed属性允许你在Vue实例中定义依赖于其他响应式数据的属性，这些属性会在其依赖发生变化时自动更新。

绑定CSS样式类 II

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    

                        {{ page.link.text }}
                
            
            

                
                    Toggle NavBar
                

            
        
    
    

        
{{ pages[activePage].pageTitle }}
        
{{ pages[activePage].content }}
    
    

1. changeTheme 方法：这是一个在 Vue 实例的 methods 属性中定义的方法。
2. let theme = ‘light’;：首先，定义了一个局部变量 theme 并初始化为 ‘light’。
3. if (this.theme == ‘light’) { theme = ‘dark’; }：检查当前主题是否为 ‘light’，如果是，则将 theme 设置为 ‘dark’，实现了主题的切换。
4. this.theme = theme;：将更新后的主题应用到 Vue 实例的 theme 数据属性上，触发视图的重新渲染，从而实现导航栏样式的动态切换。

组件

index.html

    
    
    
    
    
    



    

        

            My Vue
            

                

                    

                        {{ page.link.text }}
                
            
            

                
                    Toggle NavBar
                

            
        
    
    

    

通过 app.component 方法创建了一个名为 page-viewer 的组件。这个组件接受一个名为 page 的 prop，并根据传入的页面信息渲染页面的标题和内容。

1. app.component(‘page-viewer’, {…})：使用 app.component 方法创建一个名为 page-viewer 的组件。
2. props: [‘page’]：声明组件的属性 page，这表示 page-viewer 组件可以接受一个名为 page 的 prop。
3. template：定义了组件的模板。在这里，模板包含了一个 div 元素，其中包含了页面的标题和内容，使用了动态绑定来显示传入的页面信息。
4. 插值表达式：{{page.pageTitle}} 和 {{page.content}} 是插值表达式，用于将 page prop 中的数据动态地显示在组件中。

理解数据流

index.html

• props: 定义了pages、activePage和navLinkClick作为该组件的属性，这些属性将通过父组件传递给navbar组件。
• template: 定义了组件的模板，显示一个导航栏，其中包括品牌标识、页面链接以及一个按钮来切换导航栏的主题。
• data: 定义了组件的数据属性theme，初始值为’light’，用于控制导航栏的主题。
• methods: 定义了组件的方法changeTheme，用于切换导航栏的主题。