Vue基础语法与指令

最新推荐文章于 2024-07-30 10:56:44 发布

起个名字都这么男

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量194

点赞数

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_43672652/article/details/108902794

版权

项目初始化

用vscode打开终端，输入npm init -y生成package.json

然后安装vue

npm install vue

需要注意的是，我遇到了这个问题

出现原因：文件夹名和生成的package.json中的name属性值相同，更改package.json的name属性，然后重新执行npm install vue成功生成vue项目。

创建Vue实例，关联页面的模板，将自己的数据绑定到模板上，响应式的
指令用来简化对DOM的操作
声明方法用于做复杂的操作，methods用来封装这些方法

<div id="app">
        <!-- 单向绑定 -->
        <h1>Hello，{
   {
   name}},I'm {
   {
   num}} age</h1>
        <!-- 双向绑定，num先绑定vue中data的num,num改变，视图跟着改变，输入框中的值改变，num也改变 -->
        <input type="text" v-model="num">

        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancel">取消</button>
        
    </div>



    <script>
        // 声明vue对象
        let app = new Vue({
   
            el: "#app",// 绑定元素
            data: {
   //封装数据
                name: "张三",
                num: 20
            },
            methods: {
   //封装方法
                cancel() {
   
                    if (this.num > 0) {
   
                        this.num--;
                    }else{
   
                        alert("亲~，取消完毕，不能再取消了！")
                    }

                }
            },
        });
       
    </script>

插值表达式

格式：{ {表达式}}

说明：

表达式支持JS语法，可以调用JS的内置函数，但是要求必须有返回值。例如{ {1+1}}可以，{ {hello()}}hello是一个由返回值的函数。
可以直接获取Vue的实例中定义的数据或者函数。

插值闪烁

使用{ {}}的方式在网速较慢的时候会出现问题，在数据未加载完毕的时候，页面会显示出原始的{ {}}，加载完毕后才显示正确的数据，这种现象被叫做插值闪烁。

v-text与v-html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <title>Vue</title>
</head>

<body>
    <!-- 插值表达式{
   {}} -->
    <div id="app">
        {
  {msg}} {
  {sayHello()}} {
  {1+1}}<br>
        &

最低0.47元/天解锁文章

起个名字都这么男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法与指令

项目初始化用vscode打开终端，输入npm init -y生成package.json然后安装vuenpm install vue需要注意的是，我遇到了这个问题出现原因：文件夹名和生成的package.json中的name属性值相同，更改package.json的name属性，然后重新执行npm install vue成功生成vue项目。创建Vue实例，关联页面的模板，将自己的数据绑定到模板上，响应式的指令用来简化对DOM的操作声明方法用于做复杂的操作，methods用来封装这些方
复制链接

扫一扫

专栏目录