Vue学习

Vue学习2019/10/9

（实例生命周期钩子）
实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子需要写在new Vue传递的这个对象内，以属性的方式声明，这个属性是一个函数，
在这个Vue应用运行的每一个阶段，系统会自动调用这个已声明的生命周期钩子
生命周期函数（频繁应用的）不能使用箭头函数（没有相似的）

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
也就是整个页面创建之前把它调用的一个生命周期
beforeCreate:function(){
console.log(‘beforeCreate’);
},

在实例创建完成后被立即调用。
created :function(){
console.log(‘created’);
},

在挂载开始之前被调用：相关的渲染函数首次被调用。
准备挂载的一个状态。
beforeMount : function(){
console.log(‘beforeMount’);

},

el 被新创建的 vm.$el 替换, 挂载成功。
整个所有的节点被新的Vue给替换挂载成功之后所调用。
mounted : function(){
console.log(‘mounted’);

},

数据变换之前所调用的函数
beforeUpdate : function(){
console.log(‘beforeUpdate’);

},

组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log(‘updated’);

}

（模板语法）
使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令

{{ rawHtml }}

普通文本

HTML代码 rawHtml : ' this is should be red', 设置属性HTML代码的属性

v-bind 动态地绑定一个或多个特性 语法：v-bind：属性=""

            <div id="app" >
           <p v-html="rawHtml"></p>
           <div v-bind:id="color">爽</div>
	</div>
          <script type="text/javascript">
            var vm = new Vue({
		el : "#app",
		data : {
			
		    color:'fen',
		}
	});
          </script>
    <style type="text/css">
   #fen{color:pink;font-size: 100px;}
</style>

表达式：

<p>{{ number + 1 }}</p>

   </div>
     <script type="text/javascript">
   var vm = new Vue({
 el : "#app",
 data : {
	number : 10,
 }
   });

页面刷新number结果为：11

   <div id="app">

<p>{{ A ? 'YES' : 'NO' }}</p>   三元运算 A为真执行YES 为假执行NO

   </div>
     <script type="text/javascript">
   var vm = new Vue({
 el : "#app",
 data : {
	A : 1,
 }
   });

  <div id="app">
                 
<p>{{ message.split('').reverse().join('') }}</p>

   </div>
     <script type="text/javascript">
   var vm = new Vue({
 el : "#app",
 data : {
	message : "vue"
 }
   });

split(’’)以没有内容的方式拆分 v u e，执行成功的结果会返回成为一个数组
reverse(’’)反序 e u v
join(’’)结合成一个字符串

（指令）
v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

<div id="app">
<p v-if="seen">现在你看到我了</p>
 </div>