分析初识vue小案例

44 篇文章 5 订阅
18 篇文章 3 订阅

前言

我们已经写好了一个案例:初识vue小案例

接下来我们就分析初识vue小案例

容器和vue实例是一一对应的!

容器和vue实例应该是一一对应的,不允许出现一对一或者一对多

下面是一个一个容器对多个实例的例子,这里我们把id选择器换成类选择器了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <!-- 引入vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <p #a></p>
        <script type="text/javascript">
             // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip= false 
            // 创建一个vue实例
            new Vue({
                // 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                data:{  // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式
                    name:'vue',
                    age:'18'
                }
            })
        </script>
    </body>
   
</html>

在这里插入图片描述
页面上第二个容器是无法解析的
在这里插入图片描述
然后是一个容器对应两个实例,很明显也是不行的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <!-- 引入vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
       
        <p #a></p>
        <script type="text/javascript">
             // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip= false 
            // 创建一个vue实例
            new Vue({
                // 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                data:{  // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式
                    name:'vue',
                    age:'18'
                }
            })
             // 创建一个vue实例
             new Vue({
                // 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                data:{  // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式
                    name:'java',
                    age:'28'
                }
            })
        </script>
    </body>
   
</html>

在这里插入图片描述
只有一个容器对一个实例才是正常的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <!-- 引入vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <div id="root1">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
       
        <p #a></p>
        <script type="text/javascript">
             // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip= false 
            // 创建一个vue实例
            new Vue({
                // 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                data:{  // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式
                    name:'vue',
                    age:'18'
                }
            })
             // 创建一个vue实例
             new Vue({
                // 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root1', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                data:{  // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式
                    name:'java',
                    age:'28'
                }
            })
        </script>
    </body>
   
</html>

在这里插入图片描述
在这里插入图片描述

容器里面vue插值语法{{}}只能写js表达式

{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性

如果写一个不存在data的属性肯定是不可以的
在这里插入图片描述
在这里插入图片描述
但是写一些其他的是可以的,比如1+1,Date.now(),这些都是js的表达式

在这里插入图片描述
在这里插入图片描述
一旦data中的数据发生变化,那么页面中用到该数据的地方也会自动更新

我们可以通过谷歌vue插件观察并且发现vue的值变化

在这里插入图片描述
同时可以点击value进行修改,点击后面的笔进行编辑,然后点击保存按钮保存
在这里插入图片描述
在这里插入图片描述

初识vue总结

1 想让vue工作,就必须创建一个vue实例,并且传入一个配置对象(容器)
2 root容器里的代码仍然符合html规范,只不过混入了一些特殊的vue语法
3 root容器里的代码被称为vue模板
4 vue实例和容器是一一对应的
5 真实开发中只有一个vue实例,并且会配合着组件一起使用
6 {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7 一旦data中的数据发生变化,那么页面中用到该数据的地方也会自动更新

  • 11
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
好的,我来给你介绍一个用 Vue 3.0 实现的小案例。 这个案例是一个简单的待办事项列表,可以添加、删除和标记完成任务。 我们先来看一下代码实现: ```html <template> <div> <h2>待办事项列表</h2> <input type="text" v-model="newTodo" placeholder="请输入待办事项"> <button @click="addTodo()">添加</button> <ul> <li v-for="(todo, index) in todos" :key="index"> <span :class="{ done: todo.done }">{{ todo.content }}</span> <button @click="deleteTodo(index)">删除</button> <button @click="toggleDone(index)">{{ todo.done ? '未完成' : '已完成' }}</button> </li> </ul> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ newTodo: '', todos: [] }); const addTodo = () => { if (state.newTodo.trim() !== '') { state.todos.push({ content: state.newTodo, done: false }); state.newTodo = ''; } }; const deleteTodo = (index) => { state.todos.splice(index, 1); }; const toggleDone = (index) => { state.todos[index].done = !state.todos[index].done; }; return { newTodo: state.newTodo, todos: state.todos, addTodo, deleteTodo, toggleDone }; } }; </script> <style> .done { text-decoration: line-through; } </style> ``` 这个案例使用了 Vue 3.0 的 Composition API,使用 `reactive` 创建响应式对象,然后在 `setup` 函数中定义了添加、删除和标记完成任务的函数,并通过 `return` 返回这些函数和响应式数据,最后在模板中使用了指令和事件监听器来实现交互效果。 如果你想要更详细的介绍,可以参考 Vue 3.0 官方文档:https://v3.vuejs.org/guide/introduction.html。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小花皮猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值