Vue.js基础(一)

VUE基础(一)

MVVM

视图(V)与数据(M)独立工作,中间通过(VM)协调连接。程序员不用再通过操作DOM去绑定数据等。

VUE基本代码

<body>
<div id="app">
	<p>{
     {
     msg}}</p>
</div>

<script>
	var vm = new Vue({
     
		el: "#app";  //表示当我们new的这个vue实例要控制页面上的哪个区域
		data: {
     
			msg: "我爱前端!" //data属性中存放的是el中要用到的区域
		}
	})
</script>
</body>

以上代码中,HTML部分即是MVVM中的V层,new出来的vue实例vm是VM,data就是M。

v-cloak / v-text / v-html

<div id = 'app'>
        <p v-cloak>+++{
     {
     msg}}***</p>
        <div v-text='msg'>=====</div>
        <div v-text='msg2'></div>
        <div v-html='msg2'></div>
    </div>

    <script>
        var vm = new Vue({
     
            el: '#app',
            data: {
     
                msg: '我要学好vue',
                msg2:'

我是一个H1,标题最大的就是我

'
, mytitle:"我是一个按钮" } }) //输出: //+++我要学好vue*** //我要学好vue //

我是一个H1,标题最大的就是我

//我是一个H1,标题最大的就是我 </script>

v-cloak/v-text/v-html的区别:

  • v-cloak可以解决插值表达式闪烁的问题(闪烁:网速慢的时候,vue没有加载出来,在页面上会显示{ {msg}},等加载完vue后才能看到msg表示的值)
  • v-text会覆盖元素中原本的内容,插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空。
  • v-html能把html结构加载出来,也会覆盖元素中原本的内容。而插值表达式与v-text都只能把html结构当做普通文本加载。

v-bind指令

v-bind是Vue中提供的用于绑定属性的指令
缩写::

 <button v-bind:title="mytitle">按钮</button> 
 
 <button v-bind:title="mytitle + '123'">按钮</button>
 <!-- 浏览器解析的时候会把mytitle当成js表达式去解析,所以可以把mytitle当成一个变量 -->
 
<button :title="mytitle + '123'">按钮</button>
<!-- v-bind可以被简写为: -->

<script>
        var vm = new Vue({
     
            el: '#app',
            data: {
     
                msg: '我要学好vue',
                msg2:'

我是一个H1,标题最大的就是我

'
, mytitle:"我是一个按钮" } }) </script>

v-on

Vue提供的事件绑定机制
缩写:@

<button :title="mytitle + '123'" v-on:click = 'show'>按钮</button>
<script>
        var vm = new Vue({
     
            el: '#app',
            data: {
     
                msg: '我要学好vue',
                msg2:'

我是一个H1,标题最大的就是我

'
, mytitle: "我是一个按钮" }, methods: { show: function() { alert("hello"); } } }) </script> <!-- 方法要写在methods对象里 -->

学习总结

  • 如何定义一个基本的Vue代码结构
  • 插值表达式和v-text
  • v-cloak
  • v-html
  • v-bind Vue提供的属性绑定机制 缩写是:
  • v-on Vue提供的事件绑定机制 缩写是@

跑马灯案例

<div id='word'>

        <button @click = 'go'>开始</button>
        <button @click = 'stop'>停止</button>
        <p>{
     {
     msg}}</p>
</div>

<script>
    var vm = new Vue({
     
        el: '#word',
        data: {
     
            msg:'我爱乐视薯片!',
            intervalId: null
        },
        methods:{
     
            go(){
     
                if(this.intervalId != null) return;
                this.intervalId = setInterval(() => {
     
                    let start = this.msg.substring(0,1);
                    let end = this.msg.substring(1);
                    this.msg = end + start;
                },400)
                
                
            },
            stop(){
     
                clearInterval(this.intervalId);
                this.intervalId = null;
            }
        }
    })
</script>

你可能感兴趣的:(Vue.js,VUE,Vue.js基础,Vue学习笔记)