Vue基础知识(1)

最新推荐文章于 2022-09-21 19:58:43 发布

三千翎羽渡凡尘

最新推荐文章于 2022-09-21 19:58:43 发布

阅读量653

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dxw476123441/article/details/121086357

版权

vue基础

Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angular

Vue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：

vue官网

与Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）

hello Vue.

1.引入vue.js库

<script src="vue.js"></script>

2.创建vue实例

<script>
   new Vue({
      el：'#app',
      data: {msg:'Hello,Vue.js 2'}
   })
</script>

3.完整html导

<div id="app">
   hello Vue!
</div>

4.完整的helloWorld代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {
  {message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

模板语法-文本语法

文本

数据绑定最常见的形式就是使用{ {}}语法 (双大括号)

<span> {
  {message}}</span>

也可以使用v-text方法

<span v-text="message"></span>

html文本

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
       <div v-html="rawMsg"></div>
   </div>
   <script type="text/javascript">
       var app=new Vue({
           el:'#app',
           data:{
               message:'hello Vue!',
               rawMsg:'<h1>你好vue</h1>'
           }
       })
   </script>

最低0.47元/天解锁文章

三千翎羽渡凡尘

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue基础知识(1)

目录vue基础hello Vue.模板语法-文本语法文本模板语法-属性使用 JavaScript 表达式条件指令 v-ifv-show指令列表渲染基本用法对象循环输出key事件处理方法事件修饰符侦听器对象变化监听自定义指令vue基础Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angularVue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CS
复制链接

扫一扫