Vue 入门

Vue 入门

  • img

渐进式 JavaScript 框架

# 渐进式
   1. 易用  html css javascript
   2. 高效  开发前端页面 非常高效 
   3. 灵活  开发灵活 多样性
# 总结
        Vue 是一个javascript 框架 js 简化页面js操作
        bootstrap 是一个css框架  封装css
# 后端服务端开发人员: 
        页面标签  dom  jquery js document.getElementById("xxx")
        Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM  
        注意: 日后在使用Vue过程中页面中不要在引入Jquery框架
        html css--->javascript(document.getElementById()...) -----> jquery($("#xx")) 
                ----> angularjs -----> Vue(前后端分离架构核心)
         Vue 前端系统     <---JSON---->  后台系统springcloud
         19年  full stack  全栈式开发工程师
# Vue 作者
     尤雨溪   国内的华人

下载Vuejs

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

Vue第一个入门应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
{{username}}
{{pwd}}
<br>
    <span>  {{ username }}
            <h1>
            {{ msg }}</h1>
    </span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",  //element 用来给Vue实例定义一个作用范围
        data:{
            //用来给Vue实例定义一些相关数据
            msg:"欢迎你,期待你的加入!",
            username:"hello Vue!",
            pwd :"12345",
        },
    });
</script>
</body>
</html>

# 总结:
            1.vue实例(对象)中el属性:     代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法
            2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
            3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
            4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器
posted @ 2021-07-07 15:21  saxon宋  阅读(39)  评论(0)    收藏  举报