初识vue

vue是一套用于构建用户界面的渐进式框架。

Mustache语法： 是"胡子"的意思, 因为嵌入标记像胡子 {{}}: mustache 语法, 也被vue 使用

一、声明式渲染

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

var app = new Vue({
  el: '#app',
  data() {
    return{
        message: 'Hello Vue!'
    }
  }
})

以上数据和 DOM 已经被建立了关联，所有东西都是响应式的。

打开浏览器的控制台并修改 app.message 的值，上例也会相应地更新。

二、常用指令

①v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind: => :

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app = new Vue({
  el: '#app',
  data() {
    return{
        message: '页面加载于 ' + new Date().toLocaleString()
    }
  }
})

在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

②v-if 让一个元素彻底消失

<div id="app">
      <p v-if="seen">我是大笨蛋</p>
</div>
<script src="vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data() {
			return {
                seen:false
			}
		}

	})
</script>

③v-for遍历内容

<div id="app">
        <ul>
            <!-- <li v-for="item in county">{{item}}</li> -->
            <li v-for="item of county">{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    county: ['中国', '美国', '德国', '日本']
                }
            },
        })
    </script>

④v-on是监听 监听事件的变化

<div id="app">
        <h1>{{num}}</h1>
        <!-- <button type="button" v-on:click="add">增加</button> -->
        <button type="button" @click="add()">增加</button>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                /* add(){
                	this.num++//this代表vue的实例 所有需要从data中拿的数据都要加this你才能拿到
                } */
                add: function() {
                    this.num++
                }
            }
        })
    </script>

⑤v-model 指令 实现表单输入和应用状态之间的双向绑定

<div id="app">
        <h2>{{msg}}</h2>
        <input type="text" v-model="msg" />
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "我们都是很努力的人"
                }
            }
        })
    </script>

三、需要了解的指令

① v-once 它的作用就是定义它的元素或组件只会渲染一次,包括元素或者组件的所有字节点。首次渲染后,不再随着数据的改变而重新渲染。也就是说使用v-once,那么该块都将被视为静态内容。

<h2 v-once>{{msg}}</h2>

② v-html指令:向指定节点中渲染包含html结构的内容。

     与插值语法的区别：(1) v-html会替换掉节点中的所有内容，{{××x}则不会

                                      (2) v-html可以识别html结构。

      严重注意:v-html有安全问题

      (1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

      (2)一定要在可信的内容上使用v-html，永不要在用户提交的内容上

③ v-text 相当于原生js中的innerText

<h2 v-text="message">你也好</h2>
<script src="vue.js"></script>
<script>
    const app = new Vue({
        el: "h2",
        data() {
            return {
                message: "你好啊"
            }
        }
    })
</script>

④ v-cloak：防止页面加载时出现 vuejs 的变量名

<div v-cloak>
  {{ message }}
</div>

[v-cloak] {
  display: none;
}

但有时添加完毕后仍有部分变量会显示，这是怎么回事呢？通过控制台查看，原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，我的处理方案是添加 !important ，简单粗暴。新css样式如下：

[v-cloak] {
  display:none !important;
}