日记:不使用vue脚手架创建组件

本文通过一个简单的示例介绍了Vue.js的基本用法,包括组件声明、数据绑定及模板使用等核心概念,并提供了完整的HTML代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

丢个代码块自己体会一下:

注意事项,组件声明要在绑定dom节点之前。
v-cloak是为了防止还没有读取到数据之前显示{{xxx}},网上有文章。
万事开头难,引你们入门接下来继续去看官网文档吧!相信你会有更深的体会。
vue.js下载
官网文档

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css放在head结束标签前 -->
    <link rel="stylesheet" href="style/index.css">
</head>
<body>
    <div class="is-chamberOfCommerceContent">
        <div class="headerWrapper" id="test1" v-cloak>
            {{testData}}
            <testdata></testdata>
        </div>
        <div class="main-cnt"></div>
    </div>
    <template id="test111">
        <div>
            我是测试数据111
        </div>
    </template>
    <script src="./javascript/vue.js"></script>
    <script>
        Vue.component('testdata', {
            template: '#test111'
        })
        var app = new Vue({
            el: '#test1',
            data: {
                testData: '我是测试数据'
            }
        })
    </script>
</body>
</html>
### 使用 Vue CLI 创建记事本应用 为了创建一个基于 Vue 的记事本应用程序,可以按照如下方式操作: #### 安装 Vue CLI 工具 确保已经全局安装了 `@vue/cli` 。如果没有安装,则可以通过 npm 来完成这一工作。 ```bash npm install -g @vue/cli ``` 此命令会下载并设置好最新版本的 Vue CLI 到系统的环境中[^1]。 #### 初始化新项目 使用更新后的指令来初始化一个新的 Vue 项目。对于 Windows 用户遇到上下键无法正常工作的状况,建议采用带有 `winpty` 命令的方式来启动创建过程: ```bash winpty vue.cmd create note-app ``` 这条命令将会引导用户通过交互界面选择所需的预设配置选项,比如是否要包含 TypeScript 支持、单元测试框架等特性[^4]。 #### 进入项目目录并运行开发服务器 一旦项目结构搭建完毕,进入刚建立好的文件夹内,并启动本地服务来进行初步验证: ```bash cd note-app npm run serve ``` 此时浏览器应自动打开页面展示默认生成的应用程序模板;如果未自动跳转,请手动访问 http://localhost:8080 地址查看效果[^2]。 #### 开发记事本核心功能 针对具体业务逻辑——即实现简单的笔记编辑保存等功能,可以在 src/components 文件夹下新建组件用于表示单篇日记条目或整个列表视图。同时利用 Vuex 状态管理模式管理数据状态变化,以及路由机制支持多页面导航需求。 例如定义一个名为 NoteEditor.vue 组件负责处理文本输入框内的内容增删改查动作: ```html <template> <div class="note-editor"> <!-- 文章标题 --> <input v-model="title"/> <!-- 正文区域 --> <textarea v-model="content"></textarea> <!-- 提交按钮 --> <button @click="saveNote">Save</button> </div> </template> <script> export default { data() { return { title: &#39;&#39;, content: &#39;&#39; } }, methods: { saveNote(){ console.log(&#39;Title:&#39;, this.title); console.log(&#39;Content:&#39;, this.content); // 将数据提交给父级组件或其他地方... } } } </script> ``` 以上代码片段展示了如何构建基本表单控件并与 JavaScript 方法关联起来响应用户的交互行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值