vue.js学习笔记（一）引入、初始化、写法与基本结构、6个常用指令

        H5需要通过引入各种各样的js文件，才能让页面功能更强大，交互更多更绚丽。引入js文件的方法有两种，在学习vue之前我们先来了解什么是cdn，什么是cli：

• cdn：直接在html中引入，引入包括本地引入（js文件在本地）或链接地址引入（js文件在人家的服务器上）
• cli：直接创建vue项目，就无需引入了

        一般都是使用cdn，且使用本地引入。因为链接引入，访问可能会慢，毕竟文件在人家的服务器上。

        可以通过下面的地址，找到vue的内容，然后复制到本地。

// cdn引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

引入后，如何使用vue？

一、初始化vue

1.1 vue属性1 -- el的使用

写法：

<script>
    new Vue({
        el:"#box" 
        // el : vue渲染开始的地方，必须写入标签的属性标识，id和class都可以。不能直接写body或者为空，否则是不会作用的。
    })
</script>

 用法：

<!-- 使用双大括号{
  { ... }} -->
<div id="box">
    {
  { 10+20 }}    // 页面会输出30
</div>

<div>
    {
  { 10+20 }}    // 页面会输出{
  { 10+20 }}   因为此标签没有被vue渲染
</div>

<!-- 双大括号内部相当于js的地盘 -->
<div id="box">
    {
  { 10+20 }}   //输出 30
    {
  { 10>20?'aaa':'bbb' }}   //输出 bbb
</div>

1.2 vue属性2 -- data的使用

写法：

<script>
    new Vue({
        el:"#box",
        data:{    //  所有变量都放入data
            myName:"koko",
            myId:"123"
        }      
    })
</script>

用法： 

<p> {
  { myName }} </p>   // 页面输出koko
<p> {
  { myId }} </p>     // 页面输出123

扩展：

        修改data中的变量值

<script>
    var vum = new Vue({  //通过全局变量来拿到对应参数
        el:"#box",
        data:{    
            myName:"koko",
            myId:"123"
        }      
    })

    vum.myName = "coco";  // 修改值

</script>

 { { 重要 }}

// 你敢信？双大括号中还可以放函数方法
// 只要此函数有返回值，就会直接显示返回值
<div>{
  { getPrice() }}</div>

1.3 vue属性3 -- methods的使用

写法：

<script>
    var vum = new Vue({
        el:"#box",
        data:{},
        methods:{
            aaa(){    //可被vue调用的方法都写在methods里，且此处的方法不需要function
                ...
            },
            bbb(){
                ...
            }
        }
    })
</script>

用法：先不看，先往下看

1.4 vue属性4--computed的使用

定义：

        计算属性

前提：

        vue的大括号非常的包容，可以写变量、函数公式、函数方法

下面的例子：是将变量“myName”的首字母大写

<div id="box">
    {
  { myName.substring(0,1).toUpperCase() + myName.substring(1)