创建一个vue实例

引入vue框架

学习之前需要了解Html,Css,Javascript等相关知识
几种引入方式:
script标签引入方式
1.开发环境版本,含有命令及帮助:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 生产环境版本,优化尺寸及速度:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.node命令行的方式安装:

npm install @vue/cli -g //下载中如果出错,可以清理下缓存(npm cache clean -f),再下载;下载成功后再命令中输入vue -V,如果出现版本号即安装成功

安装成功,在项目中使用
1.在命令行cd到当前的文件夹vue create 项目文件夹名称
2.选择default默认
cd 到创建的项目目录中npm run serve
完成后会生成两个路径,复制路径到浏览器打开,会出现vue的欢迎页面 ,完成
4.vue.js官网直接下载,引入使用;(开发环境下不要使用压缩版本,它不包含错误的相关警告)

使用vue.js 创建一个实例

引入vue的时候要把标签放在头部文件中,能够防止抖屏
简单的案例:

<body>
    <div id="root">{{msg}}</div>
</body>
<script>
    new Vue({
    //创建vue的实例,一般会在对象中传递几个参数
        el:"#root",
        //这个是让vue去接管页面上的哪一个元素(element);
        data:{
            //vue中的数据放在data中,在写vue的时候不会有任何dom的操作
            msg:"hello world"
        }
    })
</script>

猜你喜欢

转载自www.cnblogs.com/Front-end-smallholder/p/12794366.html