Vue框架的第一个入门案例

Vue框架系列 Part one

前言

以下是本篇文章正文内容，下面案例可供参考

第一个实例三步骤

一、Vue引入

这里我采用的是线上引入的方式

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

二、实例化vue对象

创建vue对象的实例(在创建对象实例，需要传递一个对象参数)
这个参数有很多属性：el,data

 <script>
        // 2.vue对象实例化
        let vm = new Vue({
     
            el: "#app",  //el:挂载点==》指定vue对象实例生效的标签（范围、挂载点）
            data: {
          //data==>数据中心   声明挂载点中要使用的数据   在挂载点中通过插值表达式使用  {
     {}}
                //data中的属性(变量属性)，会被挂载vue对象实例上（data中的数据会变成vue实例对象的属性）
                msg: 'hello world',//data中自定义的mag属性
                str: "你好",//str属性
                htmlStr: "我是粗字体文字"//htmlStr属性
            },
            // methods用来存放函数
            methods: {
     
            //完整写法
            // fn:function(){
     
           //   console.log(111);
           // }
           //简写写法
           fn(){
     
                 console.log(111);
                }
            }
        });
        console.log(vm);//打印查看vue对象
        console.log(vm.msg);//调用属性
        console.log(vm.str);
        setInterval(() => {
     
            vm.str += ',你好';         
             //str数据发生改变，会页面会自动更新渲染的数据===》数据绑定
        }, 1000);
    </script>

三、应用

在页面中定义标签，声明vue实例的挂载点

 <div id="app" >
 
        {
     {
     msg}}
        <h2>{
     {
     msg}}</h2>
        <p>{
     {
     str}}</p>
        {
     {
     htmlStr}}

        {
     {
     1}}
        {
     {
     1+1}}
        {
     {
     msg.lengt!=0?'hello':'world'}}
        {
     {
     '你好'}}
    </div>

四、参数解析

• el: 将Vue实例与挂载点关联起来
  1、挂载点会根据css选择器来选择对应的挂载位置
  2、 如果匹配到多个挂载点，只有第一个生效，后面的不生效
  3、不要将vue挂载到html或者body上
  4、 推荐使用id，直接挂载到这个id上，因为id具备唯一性
• data: 用来指定挂载点中要使用的数据
  1、data中的属性可以在挂载点中使用插值表达式来访问{ {数据}}
  2、data中的数据会成为vue实例的属性
  3、data中的数据一旦发生改变，页面会自动更新
• 注意：不要将body标签指定为挂载点
• { {}}中可以使用js表达式

总结

以上就是今天的第一个vue案例，小白报道，如有异议，请大佬指点！！！