2.web前端开发（八）0121 VUE3.0基础

转辰

已于 2022-01-21 17:59:35 修改

阅读量780

点赞数 1

分类专栏： 2.web前端开发文章标签：前端 vue.js javascript

于 2022-01-21 11:27:48 首次发布

本文链接：https://blog.csdn.net/guozhuanchen/article/details/122616247

版权

1.vue介绍
（1）MVVM模型
2.vue库的引入
3.创建vue实例
4.vue的template属性
5.VUE的插值表达式
（1）{ {}}
（2）v-html
（3）v-text
6.其他v-的表达式
（1）v-once
（2）v-cloak
（3）v-model
（4）v-bind
（5）v-on
（6）v-if
（7）v-show
（8）v-for

一、VUE介绍

官网：https://vuejs.org/
在这里插入图片描述

二、VUE库的引入

在这里插入图片描述

如何去官网下载vue.js和vue.min.js
https://blog.csdn.net/weixin_39921821/article/details/108618616

三、创建vue实例（3.0的）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第一个vue应用</title>
  <script src="https://unpkg.com/vue@next"></script><!-- vue3 的CDN-->
</head>

<!-- Vue的核心，是一个允许采用简洁的模板语法，来声明式地将数据渲染进 DOM 的系统 -->

<body>
  
  <div id="root">
    {
  {message}}   <!-- 用两对大括号包裹的，叫插值表达式 -->
  </div>

</body>
<script>

  //1. createApp 表示创建一个 Vue 应用（换句话说创建了一个Vue实例）, 并存储到 app 变量中
  const app = Vue.createApp({
     
    //2. Vue实例中，添加了一个data属性，返回的是一个对象
    data () {
     
      return {
     
        message: 'hello world!'
      }
    },
    //3.methods属性用于定义方法
    methods: {
     
        
    }    
    
  });
  //99.将vue应用挂载到页面DOM
  const vm=app.mount('#root');
</script>
</html>

f12终端中修改vue对象的值
在这里插入图片描述

四、vue的template属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue中template属性</title>
  <script src="https://unpkg.com/vue@next"></script><!-- vue3 的CDN-->
</head>

<!-- ▲▲▲▲▲ Vue中template属性：用于把指定的元素绑定到DOM上。但如果本身挂载的DOM中存在内容，
                             则在编译时替换为template属性指定的内容
                方式1：不使用template属性
                方式2：使用模板字符串拼接（不建议，难维护）
                方式3：使用script标签形式（HTML5标准之前的写法,script中type属性加上"x-template"）
                方式4：使用HTML的template标签（官方推荐的写法）

-->

<body>
  
  <div id="root">
    <div><h1>方式1：{
  {message}}</h1></div>
  </div>

  <!-- 方式4 使用HTML的template标签形式（推荐）-->
  <template id="tem4">
    <div>
        <h1>方式4：{
  {message}}</h1>
    </div>
  </template>

</body>


<!-- 方式3 使用script标签形式-->
<script type="text/x-template" id="tem3">
  <div> 
      <h1>方式3：{
     {
     message}}。</h1>
  </div>
</script>



<script>
  const app = Vue.createApp({
     
    data () {
     
      return {
     
        message: 'hello world!'
      }
    },
    // template:'<div><h1>方式2：{
     {message}}</h1></div>'
    // template:'#tem3'
    template:'#tem4'
  });
  // const vm=app.mount('#root');

</script>


</html>

五、VUE的插值表达式

1.{ {}}
在这里插入图片描述
2.v-html

3.v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content=&#

最低0.47元/天解锁文章

转辰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2.web前端开发（八）0121 VUE3.0基础

1.vue介绍（1）MVVM模型2.vue库的引入3.创建vue实例一、VUE介绍官网：https://vuejs.org/二、VUE库的引入如何去官网下载vue.js和vue.min.jshttps://blog.csdn.net/weixin_39921821/article/details/108618616三、创建vue实例（3.0的）<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫