Vue框架学习--老先生

Vue框架学习

按照进展今日的进度开始学习Vue框架

之前所用到的前端IDE是webstorm，功能很强只是过于庞大，所以运行上似乎不如vscode快并且在参考了部分博客之后，决定学习vscode的使用，内容和排坑有：

1.插件：参考https://blog.csdn.net/Joe0217/article/details/80950477

加插件的位置在—>调试—>安装附加调试器

2.F5调试代码，这里添加了Debugger for Chrome，但是装完点调试会报错，告诉我们没有launch.json,这里这个launch.json到底是什么，在https://blog.csdn.net/xdcx950288/article/details/80640918中有讲解，部分内容暂时用不到，目前所需知道的是，我们本地打开网页只要下面的配置

 {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "file": "${workspaceFolder}/index.html"
 }

要知道的是"file": "${workspaceFolder}/index.html"这一行原本没有，是默认没有的，这样点击调试发现localhost：8080还是打不开，提示拒绝访问。把这一行就好了

关于type为node的部分暂时不必处理，用到了再学。

demo1：声明式渲染要点：1.数据和DOM已经被建立关联；2.响应式

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

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

输出：Hello Vue！

修改message值：

app.message = "bhdsvgsjd"

输出结果：bhdsvgsjd

demo2：声明式渲染

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

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

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性

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

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。（不得不说Vue的这些特性太神奇了）

demo3：条件与循环

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

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

页面输出：现在你看到我了，继续在控制台输入 app3.seen = false，他就没了

demo3：条件与循环

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

这里我整出来中文乱码了，目前没有解决，由于这样学习过程太慢，询问导师时，导师让我直接下载cli，在项目里面改动学习，所以剩下的demo就只看一遍不敲了。

tip1： split(’’).reverse().join(’’)

methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}

split()方法用于把一个字符串分割成字符串数组

语法split接受两个参数

1.字符串或正则表达式，从separator 指定的地方分割

2.howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数 指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

reverse()方法用于颠倒数组中元素的顺序 ，该方法会改变原来的数组，而不会创建新的数组。

join()方法用于把数组中的所有元素放入一个字符串，与split()方法功能相反。 元素是通过指定的分隔符进行分隔的。 没指定默认用”，“作为分隔符

tip2: watch的简单应用

 var vm = new Vue({
       el: '#app',
       data: {
       counter: 1
    }
 });
 vm.$watch('counter', function(newval, oldval) {
    alert('计数器值的变化 :' + oldval + ' 变为 ' + newval + '!');
 });

这里第一次执行时默认不执行监听的，immediate: true可以让他第一次绑定值时就监听，但这里该怎么写还不知道没法验证

自学遇到了瓶颈，我在慕课网上查到了网课，先通过课程帮助自己转变编程思想，剩下的demo等完成网课之后再看，今天预估很难完成VUE学习。

**tip3：**挂载点

挂载点：el中对应id的HTML标签

<div id="root">

如果

里面的id换了，那么之前

 el: '#root',

这部分实例本来是要管着div，换了就不管他了，就是el对应的id能管起来。

tip4：模板

<div id="app">
  <p>{{ message }}</p>//这个叫模板，
</div>

模板还能放在js写在实例里面

<div  id ="root"></div>
<script>
    new Vue({
        el:"#root",
        template:'<h1>hello {{msg}}</h1>,
        data:{
            msg:"world"
        }
    })
</script>

tip5:v-text和v-html

<div  id ="root">
      <h1  v-text ="number"></h1>
</div>
<script>
    new Vue({
        el:"#root",        
        data:{
            msg:"world",
            number:123
        }
    })
</script>

<div  id ="root">
      <h1  v-html ="number"></h1>
</div>
<script>
    new Vue({
        el:"#root",        
        data:{
            msg:"world",
            number:123
        }
    })
</script>

上面效果是一样的，它们的区别在于：

<div  id ="root">
      <h1  v-text ="content"></h1>//输出的是<h1>hello</h1>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
         content:"<h1>hello</h1>"
        }
    })
</script>

<div  id ="root">
      <h1  v-html ="content"></h1>//输出的是hello
</div>
<script>
    new Vue({
        el:"#root",
        data:{
         content:"<h1>hello</h1>"
        }
    })
</script>

tip6:方法

<div  id ="root">
    <div  v-on:click="handleClick">{{content}}</div>//点击触发事件,v-on:简写@
</div>
<script>
    new Vue({
        el:"#root",
        data:{
         content:"hello"
        }
        methods：{
             handleClick:function(){
                 alert(123)
             }//点击后该方法被调用
              //this.content = "world"放在alert(123)的位置上就可以实现hello的点               //击替换
    })
</script>

今日内容：

vue框架学习进展缓慢，只看了接近一半的内容，vscode写js的各种配置和插件就做了两小时

明日任务：

明天看完网课争取再把demo都搞懂，用脚手架做点简单的例子。如果有时间就看json和顺便整理博客，今天的博客很乱，主要因为学习思路混乱内容没搞懂