Vue基础语法(二)之Vue起步和插值

Aτθ

已于 2022-04-28 23:57:52 修改

阅读量180

点赞数

分类专栏：前端文章标签： vue.js 前端

于 2020-12-07 18:18:48 首次发布

本文链接：https://blog.csdn.net/weixin_51730169/article/details/110823239

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下载Vue并导入

1.去官网下载:获得的vue.js
注:vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js.

Vue官网下载链接: https://cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述

2.利用pycharm新建一个项目:

在这里插入图片描述

3.将vue.js文件放在创建好的项目文件夹里面

4.创建一个html文件,eg:index.html,并导入vue.js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue的起步和插值</title>
</head>

<body>

    <!--1.引包-->
    <script src="vue.js"></script>

</body>
</html>

插值(3种方式)

方式一:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="app">
    	<!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
        <!-- 在双标签中显示数据要通过{{  }}来完成 -->
        <h2>{{msg}}</h2>
    </div>
    <!--1.引包-->
    <script src="vue.js"></script>
    <script>
        // console.log(Vue);
        // 在控制台可以看打印结果;
        // 2.初试化:vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始.
        let vm = new Vue({
            el:'#app', // 设置当前vue对象要控制的标签范围.
            // 数据属性:data是将要展示到HTML标签元素中的数据
            data:{
                msg:'hello vue',
            },
        });
    </script>
</body>
</html>

方式二:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
    </div>

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

        let vm = new Vue({
            el:'#app',
            data:function(){
                msg:'hello vue',
            },
        });
    </script>
</body>
</html>

方式三(推荐写法):
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
    </div>

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

        let vm = new Vue({
            el:'#app',
            // 单体模式, 这种写法用的居多
            data(){ 
            	return{
            		msg:'hello vue',
            	}
            },
        });
    </script>
</body>
</html>

总结

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();

2. 创建vue对象的时候，需要传递参数，自定义对象必须至少有两个属性成员
   var vm = new Vue({
     el:"#app",  // 圈地
	#数据属性定义
	data(){
            return {
                msg:'hello vue',
            }
        }
   });
   
   el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。
   要通过vue语法来控制id属性值为app的标签, 在这个标签内部,就可以使用vue的语法,这个标签外部不能使用vue语法。
   data: 保存vue.js中要显示到html页面的数据。

3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div id="app">
      <h1>{{msg}}</h1>
      <p>{{msg}}</p>
  </div>