Vue基础知识点

vue

Vue对象

const app=new Vue({
   
    el: "#app",
    data: {
   
        message: "hello vue",
        array: ['a','b','c','d']，
        url: "<a href="www.baidu.com">百度一下</a>",
        myref: "https://localhost/springboot/test1",
        fullName: 'aaaa'
    },
    methods: {
   
        //多余的参数会加入array数组中
        fun1: function(item,...array){
   
            alert(this.message);
            consolo.log(this.message);
        }
    },
    computed: {
   
      fullName: {
   
          set: function(newValue){
   
              this.fullName=newValue;
          },
          get: function(){
   
              return fullName;
          }
      }  
    },
    //过滤器
    filter: {
   
        numFilter:function(nums){
   
            return nums+"$";
        }
        //用法：{
   {array | numFilter}}
    },
    components:{
   
        mycon:constructor,
        //这是局部组件的注册
        //使用：<mycon></mycon>
    },
    //混合,以原有的为主
    mixins:[],
    //监视器
    watch:{
   
        属性名:{
   
            deep:true, 		//深度监视，监视内部属性的变化
            immediate:true,	//在初始化时让handler调用一次
            handler(newValue,oldValue){
   
                
            }
        }
    },
    //自定义指令
    derective:{
   
        mubind:{
   
            //指令与元素成功绑定时
            bind(element,binding){
   
                element.value=binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
   
                element.focus();
            },
            //指令所在面板被重新解析时
            update(element,binding){
   
                element.value=bind.value;
            }
        }
        
        //使用
        //<h1 v-mubind="data"></h1>
    },
})

<style>
    [v-cloak]{
     
        display:none;
    }
</style>

<div id="app">
    {
  {message}}
    <span v-for="(item,index) in array">{
  {item}}</span>	<!--循环遍历-->
    <button v-on:click="alert('dddd')" />		<!--绑定事件-->
    <span v-once>{
  {message}}</span>				<!--内部的值不会被改变-->
    <span v-html="url"></span>					<!--被当做html语法插入-->
    <span v-text="message"></span>				<!--同上，当做text-->
    <span v-cloak>{
  {message}}</span>			<!--要在body上面执行上面的style，在vue执行后会自动删除v-cloak-->
    
    <!--v-pre跳过vue的编译，直接显示内部内容-->
    <span v-pre></span>
    <!--v-bind的使用-->
    <a v-bind:href="myref"></a>
    <a :href="myref"></a>
   	<!--v-bind对类名的处理,当boolean值为true时把类赋给标签，否则不赋值-->
    <span v-bind:class="{classname1:boolean,classname2:boolean}"></span>
    <span :class="['active','line']"></span>
    <!--里面是一个function，返回的时字符串数组，效果同上-->
    <span :class="getclasses"></span>
    <!--在使用v-for后其他vue标签也能使用item和index-->
    <li v-for="(item,index) in movies" :style="{cursor:'pointer'}" :class="{red:index==choose}" 
        v-on:click="change(index)">{
  {item}}</li>
    <span :style="{key:'value'}"></span>
    
    <!--v-model-->
    <!--双向绑定,input的value改变会改变message-->
    <input type="text" v-model="message" />
    <!--选择改变会依据value值改变双向绑定属性值,可以省略name名-->
    <input type="radio" v-model="chooce" />
    <input type="radio" v-model="chooce" />
    <!--绑定多个checkbox，根据选择，把value加入绑定属性数组里-->
    <input type="checkbox" value="2" v-model="choocearray" />
    <input type="checkbox" value="1" v-model="choocearray" />
    <!--放入select中，value值为option中间值，其他同radio-->
    <select v-model=