Vue基本知识点学习

Vue基础知识点学习 day01

1.基本认识:
Vue是一个构建数据驱动的 web 界面的渐进式框架,所谓’‘渐进式’‘其实就是你掌握了Vue的多少用法就使用多少,不像一些框架必须掌握所有才能进行运用。
2.Vue特性

• 轻量
  Vue.js库的体积非常小的，并且不依赖其他基础库。

• 数据绑定
  对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

• 指令
  内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

• 插件化
  Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

• 组件化
  组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
  3.Vue资源安装
  很简单，到官网上下载就可以，任意版本都行，然后直接将js拷贝到项目中就完事
  4.Vue的简单使用认识

  • 步骤一(引入js文件):

  

   这里需要注意两个小问题:
   		1.<script></script>必须是双标签,单标签的<script>是没有效果的
   		2.相对路径和绝对路径的注意
  

  • 步骤二(准备挂载的元素):
    

      这里我们创建一个<div>标签,给一个id
    

  • 步揍三(准备数据):

	<script>
        var app = new Vue({
            el:"#one",	//el："#xx" 就是与你给定id为xx的标签进行挂载(也就是建立联系)
            						当然el:".xx" 还能挂载class和el:"div"标签 (推荐还是通过id来进行操作
            data:{   //vue的数据绑定在data属性上，data本身也是一个对象
                massage:"hello vue", 		//然后在你所挂钩的标签中通过  {{massage}}  的书写方式就能获取其中的值
                arr:[1,2,3,4],	//数组也一样 {{arr[0]}}
                employee:{			//对象  {{employee,name}} 
                    name:"你好",
                    age:12
                }
            },
            methods:{	//Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
                say(){
                    alert("你好")
                }
            }
        });
        app.say();	//js调用方式		在挂载标签中 {{say}} Vue的掉用方法,里面可以不写()
    </script>

Vue架构认识

MV VM模式：(medol view viewmodel)
具体解释:

VueJS表达式

VueJS表达式写在双大括号内：{{ expression }}
VueJS表达式把数据绑定到 HTML
VueJS将在表达式书写的位置"输出"数据
VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量

1
		基本的算术运算
		 /*
          * 运算 字符串 有字符串时除了‘+’加是字符串的拼接 其他会正常运算
          **/
         num: 5 + 10,
         nums: "5" + 10,
         chengfa: 5 * 9,
         chufa: 10 / 2,
         chengfas: "50" * 10,

2
		<div id="app">
			<!--三目运算  -->
			{{ show1?"真":"假"}} //真
		</div>
		<script type="text/javascript" src="js/vue/vue.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el : "#app",
				data : {
					show1 : true //这里为true
				}
			});
		</script>

3
	1.  直接使用字符串字面值作为字符串对象
	2.  使用data中的字符串对象
	<div id="app">
	    {{"这是字面值"}}<br/>
	    {{"这是字面值".length}}<br/>
	    {{message.length}}<br/>		//获取字符串长度
	    {{message.substring(1,5)}}<br/> //截取1-5个字符
	    {{message.substring(2,6).toUpperCase()}}<br/>
	</div>
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
	    var app = new Vue({
	        el: "#app",
	        data: {
	            message: "这是data中的数据"
	        }
	    });
	</script>

4
	对象操作
	在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
	<div id="app">
	    {{user}}<br/>
	    {{user.toString()}}<br/>
	    {{user.name}}<br/>
	    {{user.age}}<br/>
	    {{user.getAge()}}<br/>
	</div>
	<script type="text/javascript" src=“js/vue/vue.min.js”></script>
	<script type="text/javascript">
	    var user = {
	        name: "张三",
	        age: 29,
	        getAge: function () {
	            return this.age //前台返回user的年龄
	        },
	        toString:function(){
	            return "姓名:"+this.name+",年龄:"+this.age; //这里的this就是user
	        }
	    };
	    var app = new Vue({
	        el: "#app",
	        data: {
	            user: user	//
	        }
	    });
	</script>

5
	数组操作
	在表达式中可以使用JavaScript数组中的任何语法来操作数组.
	<div id="app">
	    {{hobbys}}<br/>
	    {{hobbys[0]}}<br/>
	    {{hobbys.length}}<br/>
	</div>
	<script type="text/javascript" src=“js/vue/vue.min.js”></script>
	<script type="text/javascript">
	    var app = new Vue({
	        el: "#app",
	        data: {
	            hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
	        }
	    });
	</script>

Vue指令

可以去查看官方文档有详细的介绍和使用方法，作用

## 常见的指令
	v-text=“表达式”  设置标签中的文本
	v-html=“表达式”  设置标签中的html
	v-if=“表达式”    判断条件	
	v-for=“表达式”   循环
	v-model=“表达式” 数据双向绑定
	v-on=“表达式”    注册事件

5:vue指令:
   指令:v-*;
   
  v-text:操作的文本;
  
  v-html:操作的html;
  
  v-for:
     v-for=” currentObject in  Objects”
   如果是对象:
     每次遍历得到的是对象的属性值:
 	v-for=” (v,k,i) in  Objects”

   如果是数组:
     每次遍历得到的是数组中单独的一个值:
	 v-for=” (array,i) in  arrays”
 
 	 v-bind:给html标签绑定属性
    单一属性绑定:v-bind:属性名=”表达式”
    绑定一个对象:v-bind=”表达式”
    
 	v-model:数据模型的绑定:双向绑定
  	v-model=”表达式”;
	作用于:   input  select textarea;如果是复选框:应该data使用数组;

	v-show:是否显示,判断表达式的值,
	true:显示;false:隐藏(只是增加一个样式:display:none,html元素没有删除的哦)

	v-if:
	1:   v-if=”表达式”:true就做事情,false:压根就把这个元素给删除了;
	2:v-if=”表达式”
    	v-else
	3:v-if=”表达式”
   	v-else-if=”表达式”
   	v-else-if=”表达式”
    v-else
 
	v-on:
	 给一个html标签绑定事件:
	v-on:事件名=”表达式”;
	 注意:this:当前对象

具体代码:

v-text=“表达式”  设置标签中的文本
	<div id="xxx" v-Text="text">
        {{text}}
    </div>
    <!--v-text不能解析html标签-->
    <script>
        new Vue({
            el:"#xxx",
            data:{
                text:"<h1>你是谁<h1>"
            }
        })
    </script>

<!--v-html能够解析html的标签功能-->
<div id="aaa" v-html="title">
    {{title}}，
</div>

<script>
    new Vue({
        el: "#aaa",
        data: {
            title: "<h1>Helle world<h1>",
        }
    })
</script>

<div id="myDiv" >
        <div v-if="num<20">
            <h1>数目小于20</h1>
        </div>
        <div v-elas-if="num>=40">
            <h1>数目大于20小与40</h1>
        </div>
        <div v-elas>
            <h1>数目大于40</h1>
        </div>
    </div>

    <script>
        new Vue({
            el:"#myDiv",
            data:{
                num:20
            }
        })
    </script>

<!--添加挂钩属性--> 
v-model只作用于以下表单:  [input  select(下拉) textarea(文本域)]

    <div id="Mydiv">
        <input type="text" v-model="title">
        {{title}}
        <textarea v-model="text"></textarea>
        {{text}}
        <select>
            <option v-for="a in arr" :arr="a.id">
                {{a.name}}
            </option>
        </select>
    </div>

    <script>
        new Vue({
            el:"#Mydiv",
            data:{
                title:"123456",
                text:"ssssssssssss",
                arr:[
                    {id:1,name:"壹"},
                    {id:2,name:"贰"},
                    {id:3,name:"叁"},
                ]
            }
        })
    </script>

<!--show为false时,只是页面隐藏信息,但是依然有值-->
    <div id="MyDiv" v-show="false">
        {{title}}
    </div>

    <script>
        new Vue({
            el:"#MyDiv",
            data:{
                title:"显示和隐式"
            }
        })
    </script>

<body>
    <button id="Mybtn"value="按钮" @click="say()" v-on:click="say">
    	按钮  	//这里有两种注册事件的写法 一： v-on:click="say"	
    										二:@click="say()" 方法的()括号可写可不写,需要传值就写上
    </button>
    <script>
        new Vue({
            el:"#Mybtn",
            methods:{
                say(){
                    alert("弹出")
                }
            }
        })
    </script>
</body>

组件:自定义编标

 <script>
        /**
         * 注意点
         *  1.一定要先定义组件,再进行vue的挂载
         *  2.模板中必需有一个根标签
         *  3.取名的问题
         *      如果使用驼峰命名法 myTag -> <my-tag>
         * /
        //自定义一个全局组件(把相同的代码搞成一个组件，以后方法调用)
        /**
         * 全局组件:被Vue挂载到的地方都可以使用
         * 定义了一个组件,名字叫做:mytag
         *  第一个参数：组件名  第二个:模块
         */
        Vue.component("mytag",{
            //组合的模板
            template:"<h1>假如有一千句html</h1>"
        })

        new Vue({
            el:"#app"
        })

        new Vue({
            el:"#app2"
        })
    </script>

局部组件

<div id="app">
        <mytag></mytag>
    </div>
    <div id="app2">
        <mytag></mytag>
    </div>

    <script>
        new Vue({
            el:"#app",
            //组件(多个)
            components:{
                mytag:{
                    template:"<h2>我是局部组件</h2>"
                }
            }
        })
    </script>