vue.js 初体验 ---- 引入

关于vue.js的版本

  • vue2，经典版本，现在绝大部分的企业项目都是用vue2版本开发。
  • vue3，新版本，未来的趋势。

1.vue.js 初体验

基于vue.js框架来编写项目需要以下几个步骤：

  • 导入vue.js包（CDN）

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

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

# 当然，也可以将文件下载下来再通过本地导入。

  • 应用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<!-- 2.指定区域，该区域的内容希望由vue.js来接管。 -->
<div id="app">
    <h1>欢迎学习Vue.js</h1>
    <div>我叫{{name}}，微信{{wechat}}</div>
    
    <input type="button" value="点我" v-on:click="clickMe">
</div>


<script>
	// 3.创建Vue对象，并关联指定HTML区域。
    var app = new Vue({
        el: '#app',
        data: {
            name: '武沛齐',
            wechat: 'wupeiqi888'
        },
        methods: {
            clickMe: function () {
                // 获取值this.name
                // 修改值this.name = "xx"
                this.name = "alex";
                this.wechat = "wupeiqi666";
            }
        }
    })
</script>
</body>
</html>
posted @ 2022-08-02 22:41  下个ID见  阅读(41)  评论(0)    收藏  举报