Vue3基础速成 - 技术栈

Vue常用语法

{{ }} 变量、表达式渲染

{{ }} 用于输出对象属性和函数返回值

javascript 复制代码

<div id="hello-vue" class="demo">
    {{ message }}
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div>

{``{ message }} 对应应用中 message 的值

v-html html 模板，渲染 html

用于输出 html 代码

java 复制代码

<div id="hello-vue" class="demo">
    <span v-html="rawHtml"></span>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                rawHtml: '<span style="color: red">这里会显示红色！</span>'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

v-model 绑定值（双向绑定）

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

v-bind 简写 : 绑定属性

javascript 复制代码

<style>
    .class1 {
        background: #444;
        color: #eee;
    }
</style>

<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br/><br/>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>

<script>
    const app = {
        data() {
            return {
                use: false
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

v-on 简写 @ 事件绑定

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

javascript 复制代码

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
    const app = {
        data() {
            return {
                message: 'XIAOQIANWOAINI!'
            }
        },
        methods: {
            reverseMessage() {
                this.message = this.message
                    .split('')
                    .reverse()
                    .join('')
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

v-if 和v-for

v-if 用于根据表达式的真假条件来控制元素的显示与隐藏。
当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素不会被渲染到 DOM 中。

javascript 复制代码

<div v-if="isVisible">
    This element is visible
</div>

v-for 用于基于源数据多次渲染元素或模板块。
通过遍历数组或对象的属性来生成对应数量的元素。

javascript 复制代码

<ul>
    <li v-for="item in items" :key="item.id">
        {{ item.text }}
    </li>
</ul>

Vue项目结构

刚打开的空项目运行后的结构：

|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： * assets: 放置一些图片，如logo等。 * components: 目录里面放了一个组件文件。 * App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 * main.js: 项目的核心文件。 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，可以添加一些 meta 信息或统计代码。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |

实际完成后项目的src结构：

views:写各种页面

router:初始状态下有两个路由，/,about

components:存储组件

main.js入口，整个组件挂载到app元素上

注：后端渲染与前端渲染：

后端渲染：每打开一个页面，服务器发送请求并且返回回来

前端渲染；只有在第一次打开（无论是什么页面），服务器将所有元素返回，同时打包在js文件中，当打开第二个或第三个等页面后，用返回的js文件直接将新页面渲染出来