Vue—入门学习笔记(简单易懂)

最新推荐文章于 2023-02-13 08:00:00 发布

༺.雨巷.༻

最新推荐文章于 2023-02-13 08:00:00 发布

阅读量434

点赞数 1

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/xue1163/article/details/108786953

版权

Vue快速入门学习

一、Vue基础

1. Vue基础 ——简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

javaScript框架
简化Dom操作
响应式数据驱动

通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. Vue基础——第一个 Vue程序

<div id="app">
        {
  { message }}
    </div>
    <script>
        var app = new Vue({
    
            el:"#app",      // 挂载点
            data:{
              // 数据对象
                message:"Hello world!"
            }
        })
    </script>

3. Vue基础——el挂载点

el挂载点的作用
- Vue会管理el选项命中的元素及其内部元素的后代元素
- 可以使用其他的选择器，但是建议使用ID选择器
- 可以使用其他的双标签，不能使用HTML和BODY
代码：

<body id="body">
    {
  { message}}
    <h2 id="app" class="app">
        {
  { message }}
        <span> {
  { message }}</span>
    </h2>
    <script>
        var app = new Vue({
    
            // el:"#app",      // Vue快速入门。。。。。
            // el:".app",     // Vue快速入门。。。。。
            // el:"div",     // {
    { message }}   
            el:"body",      // {
    { message}}
            data:{
    
                message:"Vue快速入门。。。。。"
            }
        })
    </script>
</body>

4. Vue基础——data数据对象

data数据对象的作用

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法即可

代码

<body>
    <div id="app">
        {
    { message}}
        <h2> {
    { school.name }} {
    { school.mobile }}</h2>
        <ul>
            <li>{
    { campus[0] }}</li>
            <li>{
    { campus[2] }}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
      
            el:"#app",      // 挂载点
            data:{
                // 数据对象
                message:"东方不败！",
                school:{
      
                    name:"独孤求败",
                    mobile:"独孤九剑"
                },
                campus:["令狐冲","任我行","光明左使","光明右使"]

            }
        })
    </script>
</body>

二、本地应用

1.本地应用——介绍

v - text
v - html
v - show
v - on基础
v - if
v - bind
v - for
v - on补充
v - model

2.本地应用——V-text指令

v-text作用
- 设置标签的内容（textContent）
- 默认写法会替换全部内容，使用表达式**{ {}}**可以替换指定内容

代码：

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        <h2 v-text="message+'!'">深圳</h2> 
        <h2 v-text="info+'!'">深圳</h2>
        <h2>{
    { message + '!' }}深圳</h2>        
    </div>
    <script>
        // 3.创建实例
        var app = new Vue({
      
            el:'#app',      // 挂载点
            data:{
                // 数据对象
                message:"快速入门Vue",
                info:"HTML,CSS,JAVASCRIPT,NODEJS,JQUERY,VUE,AJAX"
            }
        })
    </script>

3.本地应用——V-html指令

v-html指令的作用

设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

代码

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script

最低0.47元/天解锁文章

༺.雨巷.༻

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Vue—入门学习笔记(简单易懂)

Vue快速入门学习一、Vue基础1. Vue基础 ——简介Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 javaScript框架简化Dom操作响应式数据驱动通过如下方式引入 Vue：<!-- 开发环境版本，包含了有帮助的命令行
复制链接

扫一扫