vue框架 基础了解

基础实例

//HTMl
<div id="app">
    {{ message }}
</div>

//引入vue代码
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js">
</script>

//代码
<script>
	const vm=new Vue({
   		el:'#app',//挂载的元素
   		data : {
	        message:'this is a test' // 在页面中展示内容
    }
    // 创建vue实例的时候触发
    created: function () { 
        console.log(1111) },
    // 销毁vue被触发
    destroyed: function () { 
        console.log('this is a test'); 
    },
    //方法
     methods: { 
         destory: function () { 
             app.$destroy(); // 销毁vue
     } }
})
</script>

计算属性：将数据进行加工

computed:{
    reverseStr:function(){
        return this.str.split('').reverse().join('');
    }
}

vue 计算属性和方法的区别 ：，方法只要重新渲染，methods就会调用所有函数。计算属性只有在相关依赖发生改变时它们才会重新求值

VUE指令

v-once ： 只能被渲染一次 之后不会更改
v-cloak ：css连用[v-cloak]{display:none} 时候是否显示未渲染的内容
v-html ：可以渲染在js中写html标签内容
v-bind ：可以将html属性绑定 通过data修改属性值 简写 :id

v-bind: 可缩写成冒号 ：
例如：

<!-- 完整语法 -->
<button v-bind:class="btn">...</button>

<!-- 缩写 -->
<button :class="btn">...</button>

v-on 可缩写为@

<button v-on:class="btn">...</button>

<!-- 缩写 -->
<button @class="btn">...</button>

自动加前缀 style：

<div id="mes">
		//此处数组内取值可自定义
        <p :style="[one,two,three]">撒野</p>
</div>

<script>
    const vm = new Vue({
      el: '#mes',
      data: { //对象语法
      //可通过类进行样式设置
        one: {
           color:'pink',
           fontSize:'32px',
           marginLeft:'50px'
     },
     //同样的设置 此处后者会覆盖前者
        two:{
           color:'skyblue',
           fontSize:'40px'
    }
  }
});
</script>

v-if进行条件渲染

<div id="mes">
     <button @click="show">点击</button>
     <p v-if="test"> Lorem ipsum dolor sit, t. Veniam, numquam?</p>
</div>

<script>
const vm = new Vue({
    el: '#mes',
    data: { //对象语法
        test : true, //true 设置内容是否显示 false不显示
     },
    methods:{
       show(){
           this.test=!this.test
    }
   }
 });
</script>

以及：
v-else-if v-if 以及 v-else
template标签不会被渲染，可以将大段html代码写在里面

• 添加键 key 增加唯一性，防止vue高效复用、渲染元素时复用已有元素。
• v-show也可以实现条件渲染
• v-if与v-for一起使用，v-for具有比v-if更高的优先级