Vue.js 入门 demo1

最新推荐文章于 2024-04-20 09:35:24 发布

菜鸟小铭

最新推荐文章于 2024-04-20 09:35:24 发布

阅读量662

点赞数 1

分类专栏： Vue 学习文章标签： vue js javascript html css3

本文链接：https://blog.youkuaiyun.com/weixin_46170034/article/details/106758720

版权

本文介绍了Vue.js的基础语法和本地应用实战，包括Vue的helloWorld、el挂载点、data数据对象、v-text、v-html、v-on事件绑定、计数器案例、v-show与v-if的显示隐藏、v-bind操纵属性、v-for生成列表、v-model双向数据绑定，以及记事本功能案例。适合初学者快速入门。

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

Vue.js 入门

学习 vue.js 需要 HTML CSS JavaScript 和 AJAX 的基础
Vue 是一个 JavaScript 框架，能够简化 Dom 的操作，并且可以相应式的数据驱动
Vue 的作者是中国人尤雨溪！

这篇笔记的内容	解释
el	挂载点，也就是挂载了这个元素及其子元素可以使用 vue 里面的各种属性和方法
data	储存这个 vue 实例里面的数据
methods	储存这个 vue 实例里面的方法
v-text 或 { { message }}	设置标签的文本值
v-html	设置标签的文本值的同时也可以解析标签
v-on 或 @事件	给这个元素绑定事件
v-show	元素的显示和隐藏 (给元素添加 `display:none`)
v-if	元素的显示和隐藏 (通过删除这个元素)
v-bind 或 :属性	操纵元素的属性
v-for	根据数据的个数动态生成列表
v-model	双向绑定表单元素和 vue 实例中的 data 中的值

Vue基础语法学习

开始使用 Vue

Vue 的helloWorld

<!-- 导入vue.js -->
<script src="vue.js"></script>
<div id="app">
    {
  {message}}
</div>
<script>
    var app = new Vue({
    
        el: "#app",
        data: {
    
            message: "hello Vue"
        }
    })
</script>

这样就会在页面上打印 Hello Vue

el: 挂载点

el 命中元素的内部也会被 Vue 管理
el 同时支持id选择器，属性选择器 (class)，标签选择器(推荐使用 id 选择器)
支持所有双标签
但是无法选中 html 标签和 body 标签

{
  {message}}
<div id="app" class="app">
    {
  { message }}
    <span>
        {
  { message }}
    </span>
</div>
<script>
    var app = new Vue({
    
        // el: "#app",
        el: ".app",
        data: {
    
            message: "菜鸟小铭"
        }
    })
</script>
<!-- 输出：
{
   {message}}
菜鸟小铭 菜鸟小铭 -->

data: 数据对象

Vue 中用到的数据定义在 data 中
data 里面不仅可以放文字，还可以放对象，数组等复杂数据
使用数据时遵守 js 语法即可
新建一个 Vue 对象，并且 data 里面有一个对象

<div id="app" class="app">
    {
  { message }}
    {
  { object.name }}
    {
  { object.stu }}
</div>
<script>
    var app = new Vue({
    
        // el: "#app",
        el: ".app",
        data: {
    
            message: "菜鸟小铭",
            object: {
    
                name: "noobMing",
                stu: "vue"
            }
        }
    })
</script>
<!-- 输出：菜鸟小铭 noobMing vue -->